zoukankan      html  css  js  c++  java
  • [React Router v4] Conditionally Render a Route with the Switch Component

    We often want to render a Route conditionally within our application. In React Router v4, the Route components match the current route inclusively so a “stack” of Routes will all be processed. To render a single Route exclusively we can wrap them in the Switch component to render the first Route that matches our current URL.

      <Router basename={props.path}>
        <div>
          <Links />
    
            <Route exact path="/" render={() => <h1>Home</h1>} />
            <Route path="/about" render={() => <h1>About</h1>} />
            <Route path="/contact" render={() => <h1>Contact</h1>} />
            <Route path="/:itemid"
              render={({match}) => <h1>Item: {match.params.itemid}</h1>} />
       
        </div>
      </Router>

    Consider this part of code, we want nav to '/about' path, it will show both about page and itemid page, because it consider /about is part of '/:itemid', to solve this problem, we can introduce 'Switch', it will render first match Route.

    // https://jsbin.com/qijilug
    
    import React from 'react';
    import {
      BrowserRouter as Router,
      Route,
      Link,
      Switch
    } from 'react-router-dom';
    
    const Links = () =>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
          <Link to="/contact">Contact</Link>
        </nav>
    
    const App = (props) => (
      <Router basename={props.path}>
        <div>
          <Links />
          <Switch>
            <Route exact path="/" render={() => <h1>Home</h1>} />
            <Route path="/about" render={() => <h1>About</h1>} />
            <Route path="/contact" render={() => <h1>Contact</h1>} />
            <Route path="/:itemid"
              render={({match}) => <h1>Item: {match.params.itemid}</h1>} />
          </Switch>
        </div>
      </Router>
    )
    
    export default App
  • 相关阅读:
    js下拉框二级关联菜单效果代码具体实现
    js实现拉伸拖动iframe的具体代码
    mysql--Ubuntu下设置MySQL字符集为utf8
    python--使用MySQL数据库
    python--笨方法学python 习题52
    python--web.py使用
    python--flask使用
    python--类方法、对象方法、静态方法
    Python--类定义
    堆 在游戏中的运用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6596330.html
Copyright © 2011-2022 走看看