match

一个 match 对象如何匹配<Route path>到 URL 的相关信息。match 对象包含以下属性:

  • params: (object): 从路径动态段的 URL 解析的键/值对。
  • isExact: (boolean): 如果整个 URL 匹配是会是 true (没有不被匹配的后缀)
  • path: (string): 用于匹配的路径模式,在构建嵌套<Route>时会有用。
  • url: (string): 匹配部分的 URL。在构建嵌套<Link>时有用。

你也可以在以下场景中获得自动注入的 match 对象:

  • Route 组件中:this.props.match
  • Route 组件的 render 方法中:({ match }) => ()
  • Route 组件的子组件中:({ match }) => ()
  • withRoutor 高阶组件中: this.props.match
  • matchPath 中:返回值
  • useRouteMatch 中:返回值

如果一条<Route>没有 path 属性,那他将一直被匹配,那种情况下你会获得最近的匹配中的 match 对象。(withRouter 高阶组件中亦是如此)

空匹配

一个使用 children 属性来匹配路由的<Route>在不匹配的情况下仍然会调用 children 方法,这种情况下,match 的值会是 null。在不匹配路由时仍然渲染其包含的组件可能会很有用,但在这种情况下你会面对一些挑战。

“解析” URL 的默认方法是将 match.url 字符串连接到“相对”路径。:

let path = `${match.url}/relative-path`

如果你在 match 值为 null 是进行上述操作,你会得到一个 TypeError。

一个相似的,但是更加微妙的情况会在以下场景出现:

// location.pathname = '/matches'
<Route path="/does-not-match"
  children={({ match }) => (
    // match === null
    <Route
      render={({ match: pathlessMatch }) => (
        // pathlessMatch === ???
      )}
    />
  )}
/>

无路径<Route>从它的父对象继承 match 属性。如果他们的父母 match 是 null,他们的 natcg 也将是 null。这意味着:

  • a)任何子路径/链接都必须是绝对的,因为没有父级可以解析,并且
  • b)无路径路由的父级 match 可以 null 使用 childrenprop 进行渲染。
最后修改时间: 50 seconds ago