React router v6 以编程方式重定向

Question

我在/customerOrders/13页面中，从那里我尝试重定向到/customerOrders/14使用navigate('/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>

客户订单表格.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是更新的路由匹配参数。使用useEffect依赖于id路由匹配参数的钩子来重新运行依赖于它的任何逻辑。

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}`);
  };

  ...

};