reactjs 为什么useNavigate()函数在我的React中不起作用？

bnlyeluc 于 2023-04-05 发布在 React

关注(0)|答案(1)|浏览(426)

此问题在此处已有答案：

React Router V6 - useNavigate() may be used only in the context of a component（2个答案）
2天前关闭。
下面是我的代码。
错误：useNavigate() may be used only in the context of a <Router> component.
我的代码：

import { BrowserRouter, Route, Routes, useNavigate } from 'react-router-dom';
import MyNav from "./MyNav";
import Login from "./routes/Login"

function App() {

  const navigate = useNavigate();

  return (
    <div className="App">
      <MyNav />
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<Login />} />
        </Routes>
      </BrowserRouter>

      
    </div>
  );
}

export default App;

我试图移动登录页面，但我得到了错误。我用Routes和BrowserRouter将我的组件 Package 在Route中。为什么useNavigate（）函数在我的React中不起作用？

reactjs

来源：https://stackoverflow.com/questions/75910965/why-is-usenavigate-function-not-working-in-my-react

1条答案

按热度按时间

shyt4zoc1#

关于这个问题的问题是，你必须用BrowserRouter Package 这个组件，因为你正在这个组件中创建BrowserRouter上下文，你不能在这个上下文之外使用这个钩子。
你可以检查的最后一个代码是：

您需要创建一个父组件

// FILE: AppRouter.jsx

import {BrowserRouter} from "react-router-dom";
import {AppRoutes} from "./AppRoutes.jsx"

const AppRouter = () => {
   return <BrowserRouter>
            <AppRoutes />
          </BrowserRouter>
}

并创建将管理应用程序路由的子组件

// FILE: AppRoutes.jsx

import { Route, Routes, useNavigate } from 'react-router-dom';
import MyNav from "./MyNav";
import Login from "./routes/Login"

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

  return (
    <div className="AppRoutes">
      <MyNav />
        <Routes>
          <Route path="/login" element={<Login />} />
        </Routes>
    </div>
  );

现在您可以在组件中使用useNavigate

赞(0）回复(0）举报 2023-04-05

我来回答

reactjs 为什么useNavigate()函数在我的React中不起作用？

1条答案

相关问题

热门标签

最新问答