我想基于一些部分状态使用不同的路由,所以我想出了以下内容:
在我的输入文件中:
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 回答
您可以在路由级别使用
onEnter
方法具有检查授权 e.g 的功能。
请参阅参考:https://github.com/ReactTraining/react-router/blob/master/examples/auth-flow/app.js
另请参阅参考:https://github.com/ReactTraining/react-router/issues/243以使用 auth-flow 作为示例解释背后的意图