3

I am trying to build some routes using react router v5 and basically I have a layout(Dashboard and this dashboard has some routes.) so if I do '/dashboard' it doesn't work'. the '/dashboard' comes from the routes that I map at the last piece of code, which is basically inside the AppContent which is the layout not sure what I am missing here...

my App.js file

 <Router> <Switch> <Route exact path="/" name="Home" render={(props) => <DefaultLayout {...props} />} /> <Route path="/login" name="Login Page" render={(props) => <Login {...props} />} /> <Route path="/register" name="Register Page" render={(props) => <Register {...props} />} /> <Route path="*" name="Page 404" render={(props) => <Page404 {...props} />} /> </Switch> </Router> my DefaultLayout File: <div> <AppSidebar /> <div className="wrapper d-flex flex-column min-vh-100 bg-light"> <AppHeader /> <div className="body flex-grow-1 px-3"> <AppContent /> </div> {/* <AppFooter /> */} </div> </div> my AppContentFile: <Router> <Switch> {routes.map( (route) => route.component && ( <Route key={route.name} path={route.path} exact={route.exact} name={route.name} render={(props) => ( <route.component {...props} /> )} /> ) )} <Redirect to="/" /> </Switch> </Router>
Improve this question

2 Answers 2

Reset to default
1

Issue

The exact prop on the home "/" path necessarily precludes it from matching any nested route paths. In other words, when the path is "/dashboard" it now no longer exactly matches "/" and the layout component rendering the content is unmounted, unmounting any potential routes. It should be removed.

You also only need a single router component to provide a routing context for the entire app, so remove the extraneous Router in AppContent.

Recall also the within a Switch component that path order and specificity matters, so order your paths from more specific to less specific.

App

<Router> <Switch> <Route path="/login" name="Login Page" component={Login} /> <Route path="/register" name="Register Page" component={Register} /> <Route path="/" // <-- can now match sub-routes name="Home" component={DefaultLayout} /> <Route name="Page 404" component={Page404} /> </Switch> </Router>

AppContent - remove the Router

<Switch> {routes.map((route) => route.component && ( <Route key={route.name} path={route.path} exact={route.exact} name={route.name} render={(props) => ( <route.component {...props} /> )} /> ) )} <Redirect to="/" /> </Switch>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you Drew, all the routes are working now apart from the error page route :(...ohh dear...
@vickyvasilopoulou Yeah.... using "/" as your "generic" path into subroutes will preclude anything being unmatched since "/" matches all routes universally. You could render a Page404 as the last route in the nested switch instead of redirecting to "/", or place the AppContent stuff on a nested path, i.e. <Route path="/home" name="Home" component={DefaultLayout} /> which would allow the "*" 404 page to be matched and rendered as a catch all.
1

in your AppContentFile you need to correct your redirect from "/" to "/dashboard", just fixed like this:

<Redirect from="/" to="/dashboard" />

after that add exact to this routes:

<Route exact path="/login" name="Login Page" render={(props) => <Login {...props} />} /> <Route exact path="/register" name="Register Page" render={(props) => <Register {...props} />}/>

and add this route:

<Route path="/dashboard" exact name="Dashboard" render={(props) => <DefaultLayout {...props} />}/>
Improve this answer

4 Comments

Thank you Aous, I did but it haa weird behavior now. So once I go to homepage('/') is fine it redirects to ('/dashboard'), then once I go to any other page is working, BUT when I manually go back to '/dashboard' ti shows the error page.
I think the problem is from the first router try to remove exact prop from "/" route then try it, if it's fail try to remove the router with path "*" and let me know to edit the answer.
When I remove the router path "" then the login or register routes are a blank page, when I remove the exact from '/' and the "" then the route '/dashboard' works but login or register is blank. Now when I put back the exact and I remove the "*" the result is: routes work fine but if I manually type '/dashboard' gives blank page
I have edit it check it again!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.