zoukankan      html  css  js  c++  java
  • react-router-dom switch & match

    Renders the first child <Route> or <Redirect> that matches the location.

    If the URL is /about, then <About><User>, and <NoMatch> will all render because they all match the path. This is by design, allowing us to compose <Route>s into our apps in many ways, like sidebars and breadcrumbs, bootstrap tabs, etc.

    import { Route } from "react-router";
    
    let routes = (
      <div>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/:user">
          <User />
        </Route>
        <Route>
          <NoMatch />
        </Route>
      </div>
    );

    Occasionally, however, we want to pick only one <Route> to render. If we’re at /about we don’t want to also match /:user (or show our “404” page). Here’s how to do it with Switch:

    import { Route, Switch } from "react-router";
    
    let routes = (
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/:user">
          <User />
        </Route>
        <Route>
          <NoMatch />
        </Route>
      </Switch>
    );

    Now, if we’re at /about<Switch> will start looking for a matching <Route><Route path="/about"/> will match and <Switch> will stop looking for matches and render <About>. Similarly, if we’re at /michael then <User> will render.

    We can manually set the variable parameters like this: 

     <Route path="/scan/detail/:trx/:tokenAddress" component={ScanDetail} />

    And then we can get this parameter in the subcomponent:

    let { tokenAddress } = this.props.match.params;

    match object contains information about how a <Route path> matched the URL. match objects contain the following properties:

    • params - (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path
    • isExact - (boolean) true if the entire URL was matched (no trailing characters)
    • path - (string) The path pattern used to match. Useful for building nested <Route>s
    • url - (string) The matched portion of the URL. Useful for building nested <Link>s

    You’ll have access to match objects in various places:

    If a Route does not have a path, and therefore always matches, you’ll get the closest parent match. Same goes for withRouter.

  • 相关阅读:
    ceph之image(转)
    CEPH集群RBD快照创建、恢复、删除、克隆(转)
    java操作ceph之rbd基本操作
    Kubernetes (1.6) 中的存储类及其动态供给
    Linux 网络编程详解九
    Linux 网络编程详解八
    Linux 网络编程详解七(并发僵尸进程处理)
    Linux 网络编程详解六(多进程服务器僵尸进程解决方案)
    Linux 网络编程详解五(TCP/IP协议粘包解决方案二)
    C语言 memset函数盲点
  • 原文地址:https://www.cnblogs.com/xulei1992/p/15179717.html
Copyright © 2011-2022 走看看