javascript - react-router-dom 中 location.pathname 和 match.url 的区别？

Question

props.location.pathname 有什么区别？和 props.match.url

在react-router-dom ？

来自他们的文档:https://reacttraining.com/react-router/web/api/location

match.url

(string) The matched portion of the URL. Useful for building nested <Link>s

location

A location object to be used for matching children elements instead of the current history location (usually the current browser URL).

到目前为止，我只见过它们具有完全相同的值。

示例:

如果我的路由在此 url 中匹配:

/search/searchValue?category=whatever

我想删除查询字符串并转到:

/search/searchValue

我应该使用一个而不是另一个，还是它们都可以工作？

Answer 1

location.pathname 代表root-relative url。

match.url 表示 URL 的匹配部分，因此可能是 location.pathname 的一部分。

鉴于这两个组件:

function Home({match, location}) {
  return (
    <div>
      {match.url}
      <br/>
      {location.pathname}
    </div>
  );
}

function App() {
  return (
    <Router>
      <Route path="/" component={Home}/>
    </Router>
  );
}

如果你去/something，那么

• ma​​tch.url 将是 /(因为 URL 的匹配部分是 /)
• location.pathname 将是 /something(相对根 URL)

这是 example on stackblitz .

在您的示例中，这取决于您的路线是否与确切路径匹配(https://reacttraining.com/react-router/web/api/Route/exact-bool)。

如果不是这种情况(并且您只想检索 /search/searchValue)，那么您应该使用 match.url 因为 location.pathname 可以超过 /search/searchValue -> /search/searchValue/something。