React 路由器 v6 以编程方式重定向

Question

我在/customerOrders/13页面中，从那里我尝试使用navigate('/customerOrders/14')重定向到/customerOrders/14 。 即使 URL 已更新，页面也不会重定向到/customerOrders/14 。

下面是我从代码库中提取的与此相关的代码片段。

应用程序.js

import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
...
<BrowserRouter>
    <Routes>
        <Route path="customerOrders/:id" element={<CustomerOrderForm />}></Route>
    </Routes>
<Router>

CustomerOrderForm.jsx

import { useNavigate  } from "react-router-dom";
...

const CustomerOrderForm = () => {
    let navigate = useNavigate();

    const save = async () => {
        //
        // logic to persist data goes here...
        //

        navigate(`/customerOrders/${customerOrderId}`);
    }
    ...
}

Answer 1

当您在给定路线上时：

<Route path="customerOrders/:id" element={<CustomerOrderForm />} />

并导航到已经渲染已安装组件的同一路由，然后组件需要“监听”路由的更改，在这种情况下，特别是更新的id路由匹配参数。 使用依赖于id路由匹配参数的useEffect挂钩来重新运行依赖它的任何逻辑。

import { useNavigate, useParams } from "react-router-dom";

...

const CustomerOrderForm = () => {
  const navigate = useNavigate();
  const { id } = useParams();

  useEffect(() => {
    // rerun logic depending on id value
  }, [id]);

  const save = async () => {
    //
    // logic to persist data goes here...
    //

    navigate(`/customerOrders/${customerOrderId}`);
  };

  ...

};