React Router v6.6.2跳转异常：点击按钮无法进入Profile页面

问题描述 #

我怀疑我的React Router存在执行问题，package.json中react-router-dom版本为"react-router-dom": "^6.6.2"。以下第一个组件(App.js)是我的路由配置代码，第二个组件(Nav.js)中的按钮被点击时，应引导用户进入Profile页面（该组件未列出）。我不确定问题出在路由所在的App组件，还是包含跳转按钮的Nav组件。

App.js 代码 #

import React, { useEffect } from 'react';
import HomeScreen from "./HomeScreen";
import ProfileScreen from "./screens/ProfileScreen";
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Login from "./screens/Login"
import { auth } from "./firebase";
import { login, logout } from "./features/userSlice";
import { useDispatch, useSelector } from 'react-redux';
import { selectUser } from "./features/userSlice";
import './App.css';

function App() {
  const user = useSelector(selectUser);
  const dispatch = useDispatch();

  useEffect(()=>{           
    const unsubscribe = auth.onAuthStateChanged((userAuth) =>{     
      if (userAuth) {
        dispatch(login({
          uid:userAuth.uid,
          email:userAuth.email,
        }))
      } else{
        dispatch(logout())
      }
    });
    return unsubscribe;   
  }, [] );

  return (
    <div className="app">
      <Router>
        {!user ? (
          <Login/>) : (
          <Routes>
            <Route path="/profile" element={<ProfileScreen />}/>
            <Route path="/" element={<HomeScreen />}/>
          </Routes>
        )}
      </Router>
    </div>
  );
}

export default App;

Nav.js 代码（包含失效跳转按钮） #

import React, { useState, useEffect } from 'react'
import "./Nav.css"
import { useNavigate } from "react-router-dom";

function Nav() {
  const [show, handleShow] = useState(false);
  const navigate = useNavigate()
  
  const transitionNavBar = () => {
    if(window.scrollY > 100) {
      handleShow(true);
    } else {
      handleShow(false)
    }
  };

  useEffect(()=>{
    window.addEventListener("scroll", transitionNavBar);
    return () => window.removeEventListener("scroll", transitionNavBar);
  }, [])

  return (
    <div className={`nav ${show && 'nav_black'}`}>
      <div className="nav_contents">
        <img 
          className="nav_logo"
          src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png" 
          alt=""/>
        <img 
          onClick={() => navigate.push("/profile")}
          className="nav_avatar"
          src="data:image/jpeg"
          alt=""/>
      </div>
    </div>
  )
}

export default Nav

问题解决 #

1. 修复Nav组件的跳转语法 #

React Router v6 中，useNavigate Hook 返回的是直接调用的函数，而非带有push方法的对象。原代码的写法是v5的旧语法，需修改为：

onClick={() => navigate("/profile")}

2. 确保Nav组件处于Router上下文内 #

检查HomeScreen组件是否正确引入并渲染了Nav——只有在Router组件内部的组件，才能通过useNavigate获取路由上下文。如果Nav在Router范围外，useNavigate会抛出错误。

3. 修复App.js中的logout调用 #

原代码里dispatch(logout)缺少括号，无法触发action，需改为：

dispatch(logout())

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