Question

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

在react-router-dom中？

从其DOCS：https://reacttraining.com/react-router/web/api/location

match.url

（字符串）URL的匹配部分。用于构建嵌套的<Link>

位置

用于匹配子元素的位置对象，而不是当前历史记录位置（通常是当前浏览器URL）。

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

示例：

如果该网址与我的路线匹配：

/search/searchValue?category=whatever

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

/search/searchValue

我应该在另一个上使用还是两个都可以使用？

Answer 1

location.pathname代表 root相对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，那么

match.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-> {{1 }}。

Answer 2

我也很想听听它们之间的区别

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

2 个答案: