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

Posted 2023-02-21

【中文标题】react-router-dom中location.pathname和match.url之间的区别？

【英文标题】：Difference between location.pathname and match.url in react-router-dom?

【发布时间】：2019-11-22 11:11:24

【问题描述】：

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

在react-router-dom?

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

ma​​tch.url

(string) URL 的匹配部分。用于构建嵌套的<Link>s

位置

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

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

示例：

如果我的路由在这个url中匹配：

/search/searchValue?category=whatever

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

/search/searchValue

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

【参考方案1】：

location.pathname 代表 相对根的 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。