动态 React-Router 路由

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

这有效，但前提是我真的刷新了页面。如果我只是登录而不刷新浏览器页面，它将但是不会转换从 Home 组件到 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 为例说明背后的意图