时间戳

首页 > 解决方案 > React Router 在 else 中加载任何一个组件

javascript - React Router 在 else 中加载任何一个组件

问题描述

我创建了一个带有受保护路由的反应应用程序。现在应用程序在舞台上我无法对其进行任何强烈的更改。事情在我的App.js组件中，我有一个条件

<div className="App">
      {
        (props.auth) ? <MainView /> : <Signin /> 
      }
</div>

MainView组件中写入了所有路由。并且props.auth是redux状态。这工作正常，没有任何挑战。但是现在我想使用SignUp在用户想要创建帐户时或如果用户想要创建帐户时呈现的组件。但我提到我的路线是用MainView组件编写的。因此，如果我填写 singup 路线，我只会看到<SignIn>组件，因为app.js. 我如何<SignUp>在不更改更多结构或更简单的方式的情况下调用组件。

更加具体

<div className="App">
    {
      (props.auth) ? <MainView /> : <Signin /> || <SignUp /> //I want to render both of them if user not logged in. And they both are seperate component.
    }
</div>

标签： javascriptreactjsreact-reduxreact-routerreact-router-dom

解决方案

然后包装在反应片段或 div 中。

<div className="App">
{
  (props.auth) ? <MainView /> : <> <Signin /> <SignUp /> </> 
}

推荐阅读