Question

我想要一条路线＆＃34; /＆＃34;的是：

if authed - ＆gt;将用户带到主页（以下示例中的Pages.Feed）
如果没有authed - ＆gt;将用户带到Landing（下面示例中的Pages.Landing）

基本上，复制facebook.com或twitter.com的行为。

我想在路由级别执行此操作，而不是让组件生成逻辑。

现在我有：

function requireAuth(nextState, replaceState) {
  if (!store.getState().currentUser.nick) {
    replaceState({ nextPathname: nextState.location.pathname }, '/landing');
  }
}

ReactDOM.render(
<Provider store={store}>
  <Router history={history}>
    <Route component={Containers.App}>
      <Route component={Containers.LandingLayout}>
        <Route path="landing" component={Pages.Landing} />
        <Route path="login" component={Pages.LogIn} />
        <Route path="signup" component={Pages.SignUp} />
      </Route>
      <Route path="/" component={Containers.AppLayout}>
        <IndexRoute component={Pages.Feed} onEnter={requireAuth}/>
        <Route path="about" component={Pages.About} />
        <Route path="help" component={Pages.Help} />
        <Route path=":nick" component={Pages.Profile} />
        <Route path=":nick/:slug" component={Pages.List} />
      </Route>
    </Route>
  </Router>
</Provider>,
document.getElementById('listlogs')
);

其中＆＃34; /＆＃34;如果已经过操作，则会将用户带到他的主页（Pages.Feed），但会将用户重定向到＆＃34; / landing＆＃34;除此以外。在这里，我需要一个特定的着陆路线，我想避免。我希望它是＆＃34; /＆＃34;。

使用：

component={authLogic ? Pages.Feed : Pages.Landing}

不是解决方案。它最初会起作用，即app会在用户未登录时加载登陆，如果用户登录则会加载feed页面。但是，由于React路由器应用程序已经渲染，因此映射到组件将不会。 ;用户在前一种情况下登录或在后一种情况下登出后工作。以某种方式重新渲染路由是否有意义？有更好的解决方案吗？

Answer 1

使用路由器执行此操作的方法是在目标网页上方的路线上使用getChildRoutes，或在路线页上使用getComponent。

这些钩子使您能够运行某些逻辑，然后使用所需的子路径或组件回调。

例如，你可以这样做：

<Route path="foo" getComponent={(_, cb) => cb(authed ? Page1 : Page2)} />

有关详细信息，请参阅https://github.com/rackt/react-router/blob/v1.0.0-rc4/docs/guides/advanced/DynamicRouting.md。

Answer 2

对我来说，在组件中做一些事情是有意义的，这是你根据应用程序状态做出有关渲染内容的其他类似决定的地方。

const App = React.createClass({
  render() {
    return authed ? <AppLayout/> : <Landing/>
  }
})

有路线＆＃34; /＆＃34;显示不同的组件，具体取决于用户是否已经过操作

2 个答案: