使用 React Router 进行条件渲染

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

对于导航的设置，我有：

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

Thanks!

你至少有两种可能性：

1. Use 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>
);