使用 React Router 进行条件渲染答案

【问题标题】：Conditional rendering with React Router使用 React Router 进行条件渲染
【发布时间】：2017-10-20 03:47:43
【问题描述】：

我想在顶部渲染一些带有导航的路线，而在没有任何导航的情况下渲染其他路线（例如注册/登录页面）。

对于导航设置，我有：

const App = () => (
  <Router>
    <div>
      <Nav />
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/account" component={Account} />
        <Route path="/news" component={News} />
      </div>
      <Footer />
    </div>
  </Router>
);

我正在尝试找到使用 React Router 处理此问题的最佳方法（似乎它可能必须使用某种类型的条件来处理？-“如果我当前的路由与这些路由中的任何一个匹配，那么像这样渲染否则渲染它。”）。

谢谢！

【问题讨论】：

这似乎回答了你的问题stackoverflow.com/questions/53780075/…

标签： react-router

【解决方案1】：

你至少有两种可能性：

使用Route“路径”属性测试路由并渲染组件。 Path 属性接受 path.to.regexp 表达式。
用withRouter 方法包裹你的组件，并在Nav 内部测试路由是否匹配，否则渲染null。

第一个答案：

const App = () => (
  <Router>
    <div>
      <Route path="/(?!signin|signup)" component={Nav}/>
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/account" component={Account} />
        <Route path="/news" component={News} />
      </div>
      <Footer />
    </div>
  </Router>
);

第二个答案：

import { withRouter } from 'react-router'
const NavWithRouter = withRouter(Nav);

const App = () => (
  <Router>
    <div>
      <NavWithRouter/>
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/account" component={Account} />
        <Route path="/news" component={News} />
      </div>
      <Footer />
    </div>
  </Router>
);

【讨论】：

非常感谢，第二个解决方案效果很好

【解决方案2】：

其中A,B,C 是不同的路由，例如foo/A。

【讨论】：

【解决方案3】：

我通常使用两个不同的布局页面。在布局页面中，为内容设置一个路由。

我的代码将如下所示：

<Router>
  <Route path="/login" component={AuthLayout} />
  <Route path="/logout" component={AuthLayout} />
  <Route path="/some/path" component={Layout} />
</Router>

在每个布局中，都会有通常的页眉/页脚/导航栏，然后是另一组路由。

<div className="auth-layout">
  <header className="auth-layout__header"></header>
  <main className="auth-layout__content">
    <Switch>
      <Route path="/login" component={Login} />
      <Route path="/logout" component={Logout} />
    </Switch>
  </main>
</div>

这样，我就有了从需求到代码的直接映射。在我的代码中，这两种布局之间存在更多差异。

【讨论】：

【解决方案4】：

只需为此使用一个道具，在您能够有条件地渲染导航的孩子内部。

<Route exact path="/" render={() => <Home hasNav={false} />}

【讨论】：