React router dom v6.10 重定向功能不起作用（以编程方式重定向）

Question

自 v5 以来，我一直在使用

redirect

中的

react-router-dom

方法，但现在它不起作用。我尝试过

useNavigate

钩子，但是无法通过

useParams

钩子获取参数。它只是不会对路由中定义的组件进行任何重定向。我的应用程序是用

create-react-app

创建的。这是我的配置：

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);
reportWebVitals();

应用程序.js

import './App.css';
import { Route, Routes } from 'react-router-dom';
import Person from './entities/person/Person';
import UpdatePerson from './entities/person/UpdatePerson';

function App() {
  return (
    <Routes>
      <Route path='/' element={<Person />} />
      <Route path='/update/:id' element={<UpdatePerson />} />
    </Routes>

  );
}

然后在 PersonComponent 内渲染的组件中，我有一个调用下一个函数的按钮：

const handleEdit = (id) => {
  console.log('Edit clicked, with ID: ', id);
  redirect(`/update/${id}`);
}
...
...
...
<input
  type="button"
  value="Edit"
  onClick={() => handleEdit(person.idPerson)}
/>

我已将

import { redirect } from "react-router-dom"

导入到调用前一个函数的组件中。如果我直接访问更新组件的路由，它会按预期工作，唯一的问题是重定向。我缺少什么？因为即使在文档中，他们也建议使用

redirect

而不是

useNavigate

钩子： Redirect - React Router DOM 文档

或者也许我应该使用

useNavigate

钩子，还有其他方法来获取 URL 参数。只是不要告诉我使用

useLocation

因为在文档中他们说它返回原始数据，并且他们可以提供更好的抽象。

现在可以使用

useNavigate

而不是

redirect

函数进行重定向，并使用

useParams

来获取下一个组件中的参数，但我想知道是否可以使用重定向，因为这是推荐的选项文档。

Answer 1

redirect

实用函数仅在数据路由器路由的

loader

或

action

函数中有效使用，并且是返回302响应的简写。

new Response("", {
  status: 302,
  headers: {
    Location: someUrl,
  },
});

它不能替代

navigate

功能。你误解了这个建议，重点是我的：

建议在加载器和操作中使用

redirect

而不是 当重定向响应时，在您的组件中

useNavigate

数据。

您仍然应该在 React 组件代码中使用

useNavigate

钩子来通过回调实现导航操作。

示例：

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

...

const navigate = useNavigate();

...

const handleEdit = (id) => {
  console.log('Edit clicked, with ID: ', id);
  navigate(`/update/${id}`, { replace: true }); // <-- redirect
};

...

Answer 2

@Drew Reese 从加载器或操作中，我将如何使用重定向实用程序返回到历史记录中的上一页？