We Keep Coding

Can't route pages in react-router-dom [duplicate]

This question already has an answer here:
Why I receive blank page? React
(1 answer)
Closed last month.
I want to using the BrowserRouter component from the react-router-dom library to handle client-side routing in React.Js
In this case, when the user navigates to the every URL of the website, these pages component will be rendered. But nothing shows up to the root directory or any path.
Here is the code of app.js
import React from "react";
import GlobalStyle from "./globalStyle.js";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
//Pages
import Home from "./Pages/Home";
import Pricing from "./Pages/PricingPage.js";
import Signup from "./Pages/SignupPage.js";
function App() {
return (
<Router>
<GlobalStyle />
Test
<Routes>
<Route exact path="/" component={Home} />
<Route path="/signup" component={Signup} />
<Route path="/pricing" component={Pricing} />
</Routes>
</Router>
);
}
export default App;

If you are using react-router-dom v6, the routes should be:
<Route exact path="/" element={<Home />} />
<Route path="/signup" element={<Signup />} />
<Route path="/pricing" element={<Pricing />} />
component is element, their values are in tags.

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.

how do I make a 404 redirect with react router 6?

In react router 5 I could use a but that has been removed from react router 6. I think it's been replaced with , but that throws a security error for this usecase... For whatever reason.

Redirect is no longer in the react-router version 6. For react-router-dom v6, You can use Navigate instead of Redirect. Here is the example:
import {Routes, Route, Navigate } from "react-router-dom";
function App() {
return (
<>
<Routes>
<Route path="/404" element={<div>Page Not Found/div>} />
<Route path="*" element={<Navigate replace to="/404" />} />
</Routes>
</>
);
}

As of v6:
Remove <Redirect>s inside <Switch>
Remove any <Redirect> elements that are directly inside a <Switch>.
// Change this:
<Switch>
<Redirect from="about" to="about-us" />
</Switch>
// to this:
<Switch>
<Route path="about" render={() => <Redirect to="about-us" />} />
</Switch>
Normal elements that are not inside a <Switch> are ok to remain. They will become <Navigate> elements in v6.

How routing with react-router-dom?

I installed react-router-dom and use this code for routing, But i have error :
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch } from 'react-router-dom';
class Home extends React.Component{
render(){
return(
<h1>Home</h1>
);
}
}
class About extends React.Component{
render(){
return(
<h1>About</h1>
);
}
}
ReactDOM.render(
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
</Switch>,
document.getElementById('main')
);
What's the right way for routing in reactjs ?
tnx

Wrap BrowserRouter around your Switch like below,
<BrowserRouter>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
</Switch>
</BrowserRouter>
Here is the working code demo in codesandbox.

You didn't import BrowserRouter
You should wrap your <Switch> arround <BrowserRouter> tag
Better use a component than trying to render a <Switch> element
You may find anything your looking for on this link :
https://reacttraining.com/react-router/web/guides/philosophy
Also i made a quick pen : https://codepen.io/FabienGreard/pen/KZgwKO?editors=1010

Kay Concepts
<BrowserRouter> is needed because
Each router creates a history object, which it uses to keep track of the current location and re-render the website whenever that changes
A React Router component that does not have a router as one of its ancestors will fail to work.
Router components only expect to receive a single child element. To work within this limitation, it is useful to create an component that renders the rest of your application.
<Route>
The component is the main building block of React Router. Anywhere that you want to only render content based on the location’s pathname, you should use a element.
<Path>
When the current location’s pathname is matched by the path, the route will render a React element.
<Switch>
You can use the component to group s.
The will iterate over its children elements (the routes) and only render the first one that matches the current pathname.
I think you should create different component for Routes.
I'll just explain general project structure here
You can create component to hold <Header> and <MainContent>
As <Header> will be same througout the application and it will not change if path changes. You can include routes in <MainContent> which will be updated if path changes.
MainContent.js
import { Switch, Route } from 'react-router-dom';
const MainContent = () => (
<main>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
</Switch>
</main>
)
export default MainContent;
Layout.js
class Layout extends Component {
render() {
return (
<div className={classes.root}>
<Header />
<MainContent />
</div>
);
}
Now you can use <BrowserRouter>to wrap your <Layout> in App.js . or you can use it in <MainContent> as well
App.js
import { BrowserRouter } from "react-router-dom";
class App extends Component {
render() {
return(
<BrowserRoter>
<Layout />
</BrowserRouter>
);
}
}