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

Question

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

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

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

  ...

};

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

React router v6 programmatically redirect

reactjs

react-router-dom