We Keep Coding

React Router Dom v6 not working in my React page [duplicate]

This question already has an answer here:
Why I receive blank page? React
(1 answer)
Closed 6 months ago.
This is my app.js
I'm trying to preview the code but it's showing a blank page like extremely blank not even with an error while on my terminal it says compiled successfully!
import TopBar from './components/topbar/TopBar';
import Home from './pages/home/home';
import Write from './pages/write';
import Single from './pages/single';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<>
<Router>
<TopBar/>
<Routes>
<Route exact path ="/" element = {Home} />
<Route path ="/write" element = {Write} />
<Route path ="/single" element = {Single} />
</Routes>
</Router>
</>
);
}
export default App;

With React Router Dom v6 you should be calling the given component to element property, like so:
<Route exact path ="/" element = {<Home/>} />
<Route path ="/write" element = {<Write/>} />
<Route path ="/single" element = {<Single/>} />

Check your browser console to see more details.
but as far as i know in version 6 there is no exact in <Route/> props remove it

try removing exact and using child routers I think that would help
function App() {
return (
<>
<Router>
<TopBar />
<Routes>
<Route path="/" element={Home}>
<Route path="write" element={Write} />
<Route path="single" element={Single} />
</Route>
</Routes>
</Router>
</>
);
}

Reactjs screen is not rendering

I think that the problem is in the switch, in version of react-router-dom or in routes. Only when I created and applied the code in this class, the screen started don't render and stays white. I already changed the version of react-router-dom but I don't know what can be.
Below the code of routes.js:
//react-router-dom version: "^5.3.0"
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Home from './pages/Home';
import Header from './components/Header';
const Routes = () => {
return(
<BrowserRouter>
<Header/>
<Switch>
<Route exact path="/" component={Home}/>
</Switch>
</BrowserRouter>
)
}
export default Routes;

React Router v6 introduces some changes like.
Routes component that is kind of like Switch, but a lot more powerful one.
Route still exist but you don't pass a pointer to that component function or as a children component, Instead you pass the JSX element to the element prop &
exact doesn't exist anymore, now it's always looks for exact matches.
So, component={Home} would become element={<Home />}
Something like this
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
You can dive deep to this migration guide: https://reactrouter.com/docs/en/v6/upgrading/v5
hope that's help you

Redirect wrong behavior in react-router-dom

I'm using react-router-dom in my reactjs application, and I have this block at the end of my routes to redirect all the wrong paths to this one:
<Router>
<React.Suspense fallback={loading}>
<Switch>
//...all my routes...
//at the end of my routes I have this
<Route path="*">
<Redirect to="/dashboard" />
</Route>
</Switch>
</React.Suspense>
</Router>
If I add a random route like /nonexistentroute it redirects me to /dashboard but, If I'm in a specific route like /home and I click on the refresh button of chrome, I'm being redirected to the /dashboard when it should keep me in the same route.
How can I fix it?

You can use Navigate from latest version of react-router-dom to redirect to a different page.
import React, { Component } from 'react';
import Test_1 from './components/Test_1';
import Test_2 from './components/Test_2';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Navigate } from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<Routes>
<Route path='/' element={<Test_1 />} />
<Route path='/home' element={<Test_2 />} />
<Route path='*' element={<Navigate to='/' />} />
</Routes>
</Router>
);
}
}
export default App;

Try writing like this if you are using react-router-dom version 6
<Routes>
<Route path="/" element={<Homepage />} />
<Route path="*" element={<ErrorPage />} />
</Routes>

From your description it sounds like you are rendering several routes into a router without a Switch component. Routers inclusively match and render routes while the Switch exclusively matches and renders the first Route or Redirect component. In other words, a router will render all matches, redirects included, the Switch renders only the first.
Wrap your routes in a Switch and place the redirect last in the list so if no other route path was previously matched the Redirect will render.
<Switch>
... all other routes ...
<Redirect to="/dashboard" />
</Switch>
This OFC, all assumes you are still using react-router-dom v5 since you made no mention of any Redirect component import errors (Redirect was removed in RRDv6). If this isn't the case and you are actually using RRDv6 then please update your question to include a more complete code example.

Route in react Application is not working as expected

I have been trying to change the route of react application with react-router-dom
<Switch>
<Route path="/id" component={Random}/>
<Route path="/" exact component={Products}/>
</Switch>
Inside the application when I am using /id in the URL it is rendering Products Component instead of Random Component
Inside index.js the code is:
ReactDOM.render(
<BrowserRouter><Products/></BrowserRouter>,document.getElementById("root")
);

You should be rendering your router. You are currently rendering the product component
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/id" component={Random}/>
<Route path="/" exact component={Products}/>
</Switch>
</BrowserRouter>,document.getElementById("root")
);

You should render the Switch component inside BrowserRouter tag.

Why is react displaying all my components at once?

I have a simple app:
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import './css/hind.css';
import './css/splash.css';
import Feedback from './components/Feedback';
import NotFound from './components/NotFound';
render((
<BrowserRouter>
<div className="add-100 dark-background">
<Route path="/" exact={true} component={Feedback}/>
<Route path="*" component={NotFound}/>
</div>
</BrowserRouter>
), document.getElementById('app'));
And I would expect that at the url / I would see the first component, and at any other url, I would see the second. The NotFound part is displaying how I would expect it too, but at /, I see the first component, then the second component displayed beneath it. NotFound is definitely not in my Feedback file. How do I use the router correctly so I only display the component I want it to?

Wrap your routes with <Switch />.
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './css/hind.css';
import './css/splash.css';
import Feedback from './components/Feedback';
import NotFound from './components/NotFound';
render((
<BrowserRouter>
<div className="add-100 dark-background">
<Switch>
<Route path="/" exact={true} component={Feedback}/>
<Route path="*" component={NotFound}/>
</Switch>
</div>
</BrowserRouter>
), document.getElementById('app'));
What does <Switch /> exactly do?
It renders the first child <Route> or <Redirect> that matches the location.
source

path="*" isn't actually supported in RRv4. Instead, a Route with no path property will always match. Combining the knowledge with the Switch component, you'll get the desired outcome. Switch will only render the first matching Route, so the idea is that if none of your other Routes match, then the last Route in your Switch component will render.
<Switch>
<Route path="/" exact={true} component={Feedback}/>
<Route component={NotFound}/>
</Switch>