Question

我想基于某种部分状态使用不同的路由，所以我想出了以下内容：

我的输入文件中

：

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

这样可行，但只有在我实际刷新页面时才有效。如果我只是在没有刷新浏览器页面的情况下登录，那么它将从主组件转移到Dashboard组件，因此我怀疑routes对象在开始时只构建一次并在当前状态下构建，但是如果状态在执行中改变，则不会改变。

我还发现了https://github.com/ReactTraining/react-router/blob/master/docs/guides/DynamicRouting.md关于动态路线的问题，但是当我尝试它时，它似乎没有做我希望或预期的事情。

Answer 1

您可以在路由级别使用onEnter方法

<Route name="example" path="/example" component={Example} onEnter={functionToCheckAuthorization()} />

具有检查授权的功能，例如

function functionToCheckAuthorization(nextState, replace) {
  if (!auth.loggedIn()) {
    replace({
      pathname: '/login',
      state: { nextPathname: nextState.location.pathname }
    })
  }
}

请参阅参考：https://github.com/ReactTraining/react-router/blob/master/examples/auth-flow/app.js

另请参阅参考：https://github.com/ReactTraining/react-router/issues/243以解释使用auth-flow作为示例背后的意图

动态React-Router路由

1 个答案: