React路由报错：<Navigate>需在<Router>上下文使用的疑问排查

修复步骤 #

1. 移除外部的

   return (<Home/>)
   

   ：删掉App.js中</BrowserRouter>之后的<Home/>代码。
2. 配置默认路由（可选）：如果需要打开页面默认显示Home，给根路由添加element属性，或者设置index路由。

修正后的App.js代码 #

function App() {
  return (
    <div>
      <Navbar />
      <BrowserRouter>
        <Routes>
          {/* 方式1：根路径直接渲染Home */}
          <Route path="/" element={<Home />}>
            <Route path="login" element={<Login />} />
            <Route path="myEdu" element={<MyEdu />} />
            <Route path="completed" element={<Completed />} />
            <Route path="myEmployees" element={<MyEmployees />} />
          </Route>

          {/* 方式2：用index路由设置默认页面 */}
          {/* <Route path="/">
            <Route index element={<Home />} />
            <Route path="login" element={<Login />} />
            <Route path="myEdu" element={<MyEdu />} />
            <Route path="completed" element={<Completed />} />
            <Route path="myEmployees" element={<MyEmployees />} />
          </Route> */}
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

关键说明 #

• <Navigate>组件和useNavigate这类路由钩子，必须在Router组件（如BrowserRouter）的内部上下文使用，任何在Router外部的组件实例都无法访问路由上下文，必然触发报错。
• 确保所有需要使用路由功能的组件，都被包裹在Router组件内部。

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