React中使用Navigate组件跳转报错：需在Router上下文内使用

我想实现点击按钮跳转到添加页面的功能，尝试用<Navigate>组件后触发如下错误：

Uncaught Error: may be used only in the context of a component.

以下是我的代码：

Home.js #

const[gotoAdd, setAdd] = React.useState(false);

if(gotoAdd){
  return <Navigate to="/Add"/>
}

<Button color="inherit" onClick={()=>{
        setAdd(true);
      }}>Add Employee</Button>

Add.js #

import React from 'react'

export const Add = () => {
  return (
    <div>Addd</div>
  )
}
export default Add;

解决方案 #

错误原因 #

<Navigate>组件（以及所有React Router的路由相关API）必须在<Router>组件的上下文范围内才能工作，你的代码里缺少了这个必要的包裹。

方法1：给根组件添加Router包裹 #

在项目的入口文件（比如index.js）中，用BrowserRouter（或其他Router类型）包裹你的根组件，确保所有路由相关组件都处于Router上下文里：

import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

方法2：用useNavigate钩子替代状态控制跳转（更简洁推荐） #

不需要通过state来触发<Navigate>返回，直接使用React Router提供的useNavigate钩子实现跳转逻辑，代码更简洁：
修改Home.js：

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

const Home = () => {
  const navigate = useNavigate();

  return (
    <Button color="inherit" onClick={() => navigate('/Add')}>
      Add Employee
    </Button>
  );
};

额外检查：确保路由配置正确 #

别忘了在你的路由配置文件（比如App.js）中添加/Add路径的路由规则：

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import Add from './Add';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/Add" element={<Add />} />
    </Routes>
  );
}

内容的提问来源于stack exchange，提问作者rrrrTTTyyy