错误：useNavigate() 只能在 a 的上下文中使用<router>组件虽然我的登录页面的路由位于里面<browserrouter></browserrouter></router>

Question

我正在练习代码来管理用户信息，例如使用 React、Nodejs 和 Redux 登录。

在react router v6之后，我了解到我们使用react-dom的“useNavigate（）”而不是push来到达所需的路径。我也在练习这个方法，但是有一个像标题一样的错误。

登录路由放置在 App.js 中，并且在 LoginPage.js 中的 Login function 中调用了“useNavigate()”。

但是，错误根本没有改善。 如何在我的代码中使用导航 function？

我附上了我的 app.js 和 LoginPage.js。

应用程序.js

import './App.css';
import {
    Route,
    Routes,
    BrowserRouter
} from "react-router-dom";

import LandingPage from "./components/views/LandingPage/LandingPage";
import LoginPage from "./components/views/LoginPage/LoginPage";
import NavBar from "./components/views/NavBar/NavBar";
import RegisterBar from "./components/views/RegisterBar/RegisterBar";
import Footer from "./components/views/Footer/Footer";

function App() {
  return (
    <BrowserRouter>
        <Routes>
          <Route path="/landing" element={LandingPage()} />
          <Route path="/login" element={LoginPage()} />  
          <Route path="/nav" element={NavBar()} />
          <Route path="/register" element={RegisterBar()} />
          <Route path="/footer" element={Footer()} />
        </Routes>
    </BrowserRouter>
  );
}

export default App;

---

登录页面.js

import React, { useState }from 'react'
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { loginUser } from "../../../_action/user_action";

function LoginPage(){
    const dispatch = useDispatch();
    const navigate = useNavigate();

    const [Email, setEmail] = useState("");
    const [Password, setPassword] = useState("");

    const onEmailHandler = (event) => {
        setEmail(event.currentTarget.value)
    }
    const onPasswordHandler = (event) => {
        setPassword(event.currentTarget.value)
    }
    const onSubmitHandler = (event) => {
        event.preventDefault();
        let body = {
            email: Email,
            password: Password
        }

        dispatch(loginUser(body)).then(response => {
            if(response.payload.loginSuccess){
                navigate("/");
            } else {
                alert('error')
            }
        })
    }

    return (
        <div style={{
            display:"flex", justifyContent:"center", alignItems: "center",
            width: '100%', height: '100vh'
        }}>
            <form style={{display:"flex", flexDirection: 'column'}} onSubmit={onSubmitHandler}>
                <label>Email</label>
                <input type={"email"} value={Email} onChange={onEmailHandler}/>
                <label>Password</label>
                <input type={"password"} value={Password} onChange={onPasswordHandler}/>
                <button type={"submit"}>Log in</button>
            </form>
        </div>
    )
}
export default LoginPage

Answer 1

你必须写：

从“react-router-dom”导入 { BrowserRouter as Router }；

& 将BrowserRouter 替换为 Router 。

代码更改将如下所示 -

 import './App.css'; import { Route, Routes, BrowserRouter as Router } from "react-router-dom"; import LandingPage from "./components/views/LandingPage/LandingPage"; import LoginPage from "./components/views/LoginPage/LoginPage"; import NavBar from "./components/views/NavBar/NavBar"; import RegisterBar from "./components/views/RegisterBar/RegisterBar"; import Footer from "./components/views/Footer/Footer"; function App() { return ( <Router> <Routes> <Route path="/landing" element={LandingPage()} /> <Route path="/login" element={LoginPage()} /> <Route path="/nav" element={NavBar()} /> <Route path="/register" element={RegisterBar()} /> <Route path="/footer" element={Footer()} /> </Routes> </Router> ); } export default App;