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

Question

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

For example: I have the following URL http://localhost:3000/url1/url2/url3

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

如何使用历史记录？

Answer 1

使用history.push

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

如果您在根组件中使用 withRouter，

this.props 应该包含 history。

• Programmatically navigate with React Router

当执行 history.push(...) 时，路由器会拾取更改并对其进行操作。

仅更改 URL;

的最后一部分

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

正则表达式：

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

以上取当前window位置路径，删掉最后/（含）后的部分，并添加新字符串（新路径）

Answer 2

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

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

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