React Router v6路由跳转异常：点击Login仅URL变化页面不渲染

问题核心原因 #

1. 全局路由缺失：最初App.js仅渲染Login组件，没有配置全局的Routes，导致点击Link后URL变化但无对应路由匹配渲染组件，页面不更新。
2. 路由作用域错误：将Routes放在Login组件内，跳转至/home后Login组件会被替换，其内部的Routes也会从渲染树中消失，导致Navigation的链接无法匹配路由。
3. 嵌套路由上下文：Login组件中重复导入BrowserRouter，造成路由上下文嵌套冲突，干扰路由状态管理。

修正后的代码实现 #

1. 修改App.js，配置全局路由

import React from "react";
import { Routes, Route } from "react-router-dom";
import Login from "./components/Login";
import Home from "./components/Home";
import About from "./components/About"; // 按需引入About组件

const App = () => {
  return (
    <div>
      <Routes>
        {/* 默认路由：展示登录页 */}
        <Route path="/" element={<Login />} />
        {/* 首页路由：包含Navigation组件 */}
        <Route path="/home" element={<Home />} />
        {/* About路由：对应Navigation中的链接 */}
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
};
export default App;

2. 简化Login.jsx，移除多余路由代码

import React from "react";
import { Link } from "react-router-dom";

const Login = () => {
  return (
    <div>
      <Link to="/home" style={{ padding: 5 }}>
        Login
      </Link>
    </div>
  );
};

export default Login;

3. Home.jsx整合Navigation组件

import React from "react";
import Navigation from "./Navigation";

const Home = () => {
  return (
    <div>
      <Navigation />
      <h1>Home页面内容</h1>
    </div>
  );
};

export default Home;

4. Navigation.jsx示例（确保链接路径正确）

import React from "react";
import { Link } from "react-router-dom";

const Navigation = () => {
  return (
    <nav style={{ margin: "10px 0" }}>
      <Link to="/about" style={{ padding: "0 10px" }}>About</Link>
      {/* 可添加其他导航链接 */}
    </nav>
  );
};

export default Navigation;

关键说明 #

• 整个应用仅需一个BrowserRouter（已在index.js中配置），禁止嵌套使用，避免路由上下文冲突。
• 全局路由需放在应用顶层（如App.js），确保所有路由跳转都能匹配到对应的组件渲染规则。
• 页面组件（如Home）负责整合导航栏与页面内容，导航链接的路径需与全局路由配置一致。

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