如何使用react router替换当前url

Question

我需要使用以下方式完全更改网址。

let mycomplteUrl = 'http://localhost/tracks/id/4/39'; // http://localhost/tracks/id/4/39/4 or 
props.history.push(`${mycomplteUrl}`);

我正在动态创建这个 mycomplteUrl 变量。有时变量可能是这样的

http://localhost/tracks/id/4/39 or http://localhost/tracks/id/4/39/4 or http://localhost/tracks/id/4/39/4/5 (dynamic) or any

仅到http://localhost/tracks/id/4这部分是相同的。我需要像window.location.href = mycomplteUrl普通 JavaScript 一样替换整个 url，但使用 props.history.push 因为我需要避免页面刷新

Answer 1

注意：对于 React Router v6

import { useNavigate } from 'react-router-dom';

function MyComponentOrHook() {
    const navigate = useNavigate();

    // push
    navigate(someUrl );     // syntax
    navigate("/about");     // example

    // replace - OP's question
    navigate(someUrl , { replace: true });      // syntax
    navigate("/about", { replace: true });      // example

    return ... // JSX or hook return values
}

另外，window.location如果您使用 React Router，请避免使用，除非在极少数情况下（例如 - 导航到外部链接）。

原因：

1. 使用 React Router 库的全部目的是简化客户端路由，这样我们就不必做window.location....
2. window.location导致重新加载，这在 React 应用程序（或任何 SPA）中应该避免。