React Router Load Any of One Component in else

Question

我创建了一个带有protected route的react应用。现在App在舞台上，我不能有任何强烈的变化。问题是在我的App.js组件中我有一个条件

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

MainView组件中包含了所有的路由。props.auth为还原态。这工作得很好，没有任何挑战。但是现在我想使用SignUp组件，当或如果用户想要创建帐户时呈现。但是我提到我的路由是用MainView组件写的。因此，如果我填充singup路由，我只看到<SignIn>组件，因为app.js中的else条件。如何调用<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>

Answer 1

你可以把这两个组件放在一个div或使用一个React Fragment。

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

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

更新:

<div className="App">
{
(props.auth) ? <MainView /> : <>
flag ? <Signin /> : <SignUp />
</> // The flag must change values depending on what the user chooses to see; Its default value may be for SignIn
}
</div>

Answer 2

您可以将这些组件提取到一个新的组件中，如Login page，并在else中呈现。

或者将组件封装到一个片段中:

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

Answer 3

用react fragment或div包装。

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