仅替换 URL 中的最后一个路径部分

Question

我正在使用react-router-dom v4.3.1.

例如：我有以下网址 http://localhost:3000/url1/url2/url3

我只需要替换 URL 中的最后一条路由：/url3？/mynewroute3

用历史怎么做？

Answer 1

我知道这个问题是针对 React Router v4 提出的，但我试图用 React v5 执行同样的操作并找到这个答案。为了将来的参考，在 React Router v5 中，我能够使用以下命令执行此操作：

history.push('./mynewroute3'); // Changes last part 

history.push ('./../mynewroute3'); // /url1/url2/url3 => /url1/mynewroute3

Answer 2

使用 history.push

someMethod = () => {
  const { history } = this.props;
  history.push(`/url1/url2/url_new`);  // change url3 to "url_new"
}

this.propshistory如果您withRouter在根组件中使用，则应该包含在其中。

• SO：使用 React Router withRouter
• 使用 React Router 以编程方式导航

执行history.push(...)此操作时，路由器会接收更改并对其执行操作。

只更改 URL 的最后一部分；

location.pathname.split('/').slice(0,-1).join('/') + '/newPath'

正则表达式：

location.pathname.replace(/[^/]*$/, newPath)

以上取当前窗口位置路径，将最后一个/（包括）后面的部分剪掉，并添加一个新的字符串（新路径）