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

Posted 2023-02-22

【中文标题】React Router 在 else 中加载任何一个组件

【英文标题】：React Router Load Any of One Component in else

【发布时间】：2021-05-15 12:19:23

【问题描述】：

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

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

MainView 组件中写入了所有路由。而props.auth 是redux 状态。这工作正常，没有任何挑战。但现在我想使用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>

【参考方案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>

【讨论】：

好的..感谢您的宝贵时间。但是通过这样做，我在同一页面上看到了两个组件。加载登录时，I 条件在登录组件中呈现。 i.e 如果状态为真 -。加载仪表板或显示登录。我如何编写代码以便登录和注册都可用。

@RitikSingh 我明白了。如果您想要最简单的解决方案，请维护一个挂钩/状态变量来决定是显示 SignIn 组件还是 SignUp 组件。稍后，在 SignIn 和 SignUp 中都添加按钮来修改变量，然后使用条件来显示这两个组件。我刚刚更新了我的答案。

【参考方案2】：

您可以将这些组件提取到一个新组件（例如登录页面）中，然后在 else 中呈现。

或者将组件包装成一个片段：

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

【讨论】：

好的..感谢您的宝贵时间。但是通过这样做，我在同一页面上看到了两个组件。加载登录时，I 条件在登录组件中呈现。即如果状态为真-。加载仪表板或显示登录。我如何编写代码以便登录和注册都可用。 ——

【参考方案3】：

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

<div className="App">

  (props.auth) ? <MainView /> : <> <Signin /> <SignUp /> </>