React Router v4 - 如何动态使用布局

Question

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

我想有一个单独的登录页面，在路由 (/login) 处没有布局。当用户登录时，我想将它们路由到 /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 中进行，可能排除某些路由。