React Router按钮点击跳转新页面失效：路由正常但页面未切换

针对你遇到的路由地址栏变化但页面不切换的问题，从核心配置点逐一排查：

1. 检查根组件的路由包裹 #

确认入口文件（如main.jsx）是否用<BrowserRouter>包裹整个应用组件。没有这层包裹的话，路由状态无法被正确管理，会出现地址栏变化但页面不更新的情况。

正确写法示例：

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

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

2. 确认路由配置符合react-router-dom v6+规范 #

v6版本废弃了<Switch>，必须用<Routes>嵌套<Route>的结构，且每个路由需通过element属性指定渲染组件。检查你的路由配置文件（如App.jsx）：

正确写法示例：

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

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </div>
  );
}

3. 检查跳转按钮的实现逻辑 #

必须使用react-router-dom提供的<Link>组件或useNavigate钩子实现跳转，不能用原生<a>标签（会触发页面刷新，破坏单页应用逻辑）：

• 使用<Link>的示例：

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

// 组件内写法
<Link to="/signup">Sign up</Link>
<Link to="/login">Login</Link>

• 使用编程式导航（按钮点击事件）的示例：

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

function Navbar() {
  const navigate = useNavigate();

  const handleSignup = () => {
    navigate('/signup');
  };

  return (
    <button onClick={handleSignup}>Sign up</button>
  );
}

4. 排查路径匹配细节 #

• 确认跳转的to属性值和路由配置的path完全一致（注意大小写、斜杠是否多余）
• 如果涉及嵌套路由，需在父路由组件中添加<Outlet>组件渲染子路由内容

针对你的项目仓库的重点检查 #

结合你的仓库结构，优先确认：

• src/main.jsx是否存在<BrowserRouter>包裹
• src/App.jsx的路由配置是否符合v6规范
• 导航按钮所在组件（如src/components/Navbar.jsx）的跳转逻辑是否正确使用了<Link>或useNavigate

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