使用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属性接受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>
);

Answer 2

<Route path={`foo/(A|B|C)`} component={() => (<Baz {...props}/>)} />

A,B,C是foo/A之类的不同路线。

Answer 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>

通过这种方式，我可以直接将需求映射到代码。在我的代码中，两种布局之间存在更多差异。

Answer 4

只需使用支柱即可。在孩子们内部，你可以条件渲染导航。

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