Question

假设我有2个名为<Dashboard/>的组件在用户登录后呈现，而<Landing/>在用户尚未登录时呈现在reactjs中，如果我想使用相同的/路由，如果用户尚未登录，它将呈现<Landing/>，如果用户是<Dashboard/>，我该怎么办？登录？

<Landing/>是

<Route path="/" component={Landing} onEnter={appOnEnter}>
  <IndexRoute component={Home}/>

  ... Other not-login-required routes ...
</Route>

和Dashboard是

<Route path="/" component={Dashboard} onEnter={appOnEnter}>
  <IndexRoute component={Home} />

  ... Other login-required routes ...
</Route>

我来到getComponent/getComponents，我认为我可以使用

<Route path="/" getComponent={(nextState, cb) => {
 // do asynchronous stuff to find the components
 cb(null, Course)
}} />

但this似乎没有建议使用该方法

我们没有明确支持这种模式的原因是因为以这种方式连接起来是非常不典型的

那么实现我想要的最佳方式是什么？

Answer 1

您可以为该路线制作return this.props.loggedIn ? <Dashboard /> : <Login />;组件，

1x5

这样你就不必在路线层面处理它了。

Answer 2

这可能对寻找答案的人有所帮助。

在 react 路由器中，您可以使用 render() 返回组件，这样可以方便地进行内联渲染和包装，而无需进行不需要的重新安装。

因为它是一个函数，你可以做一个条件检查来决定哪个组件应该被渲染并返回那个组件。

最好的部分是您可以在不创建新组件的情况下内联执行此操作。

ReactDOM.render(
    <Router>
        <Route path="/home" render={() => {
             return isDashBoard ? <Dashboard /> : <Landing />
        } />
    </Router>,
   node
);

基本上是简单的内联 JSX 来确定要返回的组件。

在reactjs中使用具有相同路径路径的条件组件

2 个答案: