react router double nested routes

Question

<Router history={history}>
  <Route path="/" component={App}>
    <IndexRoute component={Home} />
    <Route path="signin" component={skipWhenAuthHoc(SignIn)} />
    <Route path="signup" component={skipWhenAuthHoc(SignUp)} />
    <Route path="signout" component={SignOut} />
    <Redirect from="account" to="/account/profile" />
    <Route path="account">
      <Route path="profile" component={UserProfile} />
      <Route path="setting" component={UserSetting} />
    </Route>
  </Route>
</Router>

i have my router set up like this, the url for the 1st level routes works (signin signup, signout).

However, i refresh the browser with url 'localhost:8080/account/profile', the broswer will give 404 error for GET http://localhost:8080/account/bundle.js.

Any ideas what might be wrong?

score 0 · Answer 1 · answered May 24 '16 at 07:07

You may want to modify your routes component if your intention is route user to /account/profile when user browse /account.

<Router history={history}>
 <Route path="/" component={App}>
 <IndexRoute component={Home} />
 <Route path="signin" component={skipWhenAuthHoc(SignIn)} />
 <Route path="signup" component={skipWhenAuthHoc(SignUp)} />
 <Route path="signout" component={SignOut} />
 <Route path="account">
   <IndexRoute path="profile" component={UserProfile} />
   <Route path="setting" component={UserSetting} />
</Route>

/account/bundle.js is not found, when i refresh the browser – xiaofan2406 May 24 '16 at 08:53 — xiaofan2406, May 24 '16 at 08:53

react router double nested routes

1 Answers1

Linked