反应路由器双重嵌套路由 [英] react router double nested routes

问题描述

<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>

我的路由器设置如下，第一级路由的 url 有效(登录注册、注销).

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

但是，我使用 url 'localhost:8080/account/profile' 刷新浏览器，浏览器将为 GET http://localhost:8080/account/bundle 提供 404 错误.js.

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?

推荐答案

如果您的意图是在用户浏览/account 时将用户路由到/account/profile，您可能需要修改路由组件.

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>

这篇关于反应路由器双重嵌套路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！