如何仅替换URL中的最后一条路由

Question

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

  

例如：我有以下网址   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"
}

如果您在根组件中使用this.props，则

history中应包含withRouter。

• SO: Using React Router withRouter
• Programmatically navigate with React Router

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

仅更改URL的最后一部分；

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

以上内容采用了当前窗口的位置路径，在最后一个/（包括）之后剪切了一部分，并添加了新的字符串（新路径）

Answer 2

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

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

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