Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nested routes are not working when URL is refreshed

See original GitHub issue

<Route path="/" component={App}>
    <IndexRoute component={FuelSavingsPage} />
    <Route path="about" component={AboutPage}/>
    <Route path="/auth"  component={AuthLayout} >
        <Route path="login" component={LoginPage}/>
        <Route path="atkn" component={AcceptTokenPage}/>
    </Route>
    <Route path="*" component={NotFoundPage} />
  </Route>

I have above configuration, when I navigate to /auth/login it works. however when I refresh the page, history fallback lib is not rendering the component instead it shows blank screen!

Should I do anything specifically?

Issue Analytics

State:
Created 8 years ago
Comments:8 (7 by maintainers)

Top GitHub Comments

2reactions

coryhousecommented, Mar 6, 2016

@CreativeManix Get latest and try again. I added a leading slash in index.html for bundle.js. I believe this will fix your issue.

1reaction

coryhousecommented, Jun 30, 2016

Great catch @jforaker. Bummer. This is my miss. The new structure for generating index.html via html-webpack-plugin caused this. I’m looking into a fix, but in the meantime, 4.0.0 will continue to work. I haven’t cut a release in awhile so it’s quite a few commits behind master.

Top Results From Across the Web

React nested route fails to load on refresh - Stack Overflow

I have been having the problem that when I nest a <Route/> element inside a component that is already being rendered by a...

React Router and nested routes - Kevin Farrugia

In my own words, a nested route is a region within a page layout that responds to route changes. For example, in a...

Implement Nested Routes in React.js - React Router DOM V6

We put the paths named 'search' & 'list' under the 'courses' path, so the URL will localhost:3000/courses/search and localhost:3000/courses/path ...

React Router 6 Tutorial #4 - Nested Routes - YouTube

React Router 6 Tutorial #4 - Nested Routes. Watch later. Share. Copy link. Info. Shopping. Tap to unmute. If playback doesn't begin shortly, ......

React Router: A simple tutorial on nested routes.

import { Link } from 'react-router-dom'; const Login = (props) => { return ( <> <div className='login'> <p>Login to the app</p> <Link to='/home' ......