Question

首先，我是React和React-Router的新手。我知道每个的基础。这是我的情况...

我想有一个单独的登录页面，该页面的路由（/登录）没有任何布局。当用户登录时，我要将其路由到/ home。此主页和其他所有页面（在登录旁边）将重复使用包含导航栏和侧边栏的布局。

当用户访问/ login路径时，如何隐藏可重用的布局？我使用条件式还是特定的React-Router'WAY'？我在适合我的情况的文档中找不到示例。

谢谢！

Answer 1

如果您问我如何向navbar以外的所有组件渲染sidebar和login，那么您可以检查浏览器url。

执行此操作的方法很多，但是其中一种方法如下：

<Route path="*" render={props => <Layout {...props} />} />

现在所有路线都会显示。然后在Layout内，您可以检查路线，并且仅在路线不等于login的情况下渲染某些东西。

render(){
  if(this.props.location === "login"){return null}
  ...
}

键入此内容时，您可以直接在React Router中进行操作，也许可以排除某些路由。