首页 文章

动态 React-Router 路线

提问于
浏览
0

我想基于一些部分状态使用不同的路由,所以我想出了以下内容:

在我的输入文件中:

import routes from './routes.js'

ReactDOM.render(
  <IntlProvider locale={locale} messages={messages[locale]}>
    <Provider store={store} key='provider'>
      <div>
        <Router history={history} routes={routes(store)} />
      </div>
    </Provider>
  </IntlProvider>,
  document.getElementById('root')
)

routes.js:

export default (store) => (
  let isAuthenticated = store.getState().auth.isAuthenticated

  if(isAuthenticated) {
    return (
      <Route component={Tool}>
        <IndexRoute component={Dashboard} />
        <Route path="products" component={Products} />
      </Route>
    )
  } else {
    return (
      <Route>
        <Route component={Site}>
          <IndexRoute component={Home} />
          <Route path="pricing" component={Pricing} />
        </Route>
        <Route component={Portal}>
          <Route path="login" component={Login} />
          <Route path="register" component={Register} />
        </Route>
      </Route>
    )
  }
)

这有效,但只有在我实际刷新页面时才有效。然而,如果我只是在没有刷新浏览器页面的情况下登录,它将**不会从 Home 组件转换到 Dashboard 组件,因此我怀疑 routes 对象在开始时只构建一次并在当前状态下构建,但不会更改如果状态改变中期执行。

我也发现https://github.com/ReactTraining/react-router/blob/master/docs/guides/DynamicRouting.md这涉及动态路线,但是当我尝试它时,它似乎没有做我希望或期望它做的事情。

1 回答

相关问题