使用React Router

时间:2017-10-20 03:47:44

标签: react-router

我想在顶部渲染一些带有导航的路线,同时渲染其他路线(如注册/登录页面)而不需要任何导航。

render example with 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找到处理此问题的最佳方法(看起来它可能需要处理某些类型的条件? - “如果我的当前路由匹配这些路由中的任何一条,那么渲染就像这样否则渲染这个。“)。

谢谢!

4 个答案:

答案 0 :(得分:4)

您至少有两种可能性:

  1. 使用Route“path”属性测试路径并渲染组件。 Path属性接受path.to.regexp表达式。
  2. 使用withRouter方法包裹您的组件,如果路由匹配则在Nav测试内,并以其他方式呈现null
  3. 第一个回答:

    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>
    );
    

答案 1 :(得分:0)

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

A,B,Cfoo/A之类的不同路线。

答案 2 :(得分:0)

我通常使用两个不同的布局页面。在“布局”页面中,为内容提供一个路由器。

我的代码如下:

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

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

答案 3 :(得分:-1)

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

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