使用React Router进行条件渲染

Question

我想渲染一些顶部带有导航栏的路线，而渲染其他路线（例如登录/登录页面）而无需导航。

对于导航设置，我有：

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处理此问题的最佳方法（似乎必须使用某种类型的条件处理吗？-“如果我当前的路由与这些路由中的任何一条匹配，则进行渲染，否则将其渲染） 。”）。

谢谢！

Answer 1

您至少有两种可能性：

1. 使用Route“路径”属性测试路线并渲染组件。Path属性接受path.to.regexp表达式。
2. 如果路由匹配，则用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>
);