React Router中Navbar内Link更新URL不切换组件，App.js内Link路由正常

核心问题是React Router的上下文共享逻辑被破坏：

• React Router 要求应用内所有的Link、Route、Switch等路由相关组件，必须被同一个顶层BrowserRouter（代码中别名导入为Router）包裹，所有组件共享同一份路由状态上下文，路由变化会被同上下文内的Route组件感知并触发组件重渲染。
• 当前代码存在两个相互独立的BrowserRouter实例：
  • App.js内的Router实例包裹了路由匹配所需的Switch、Route和内嵌的Link，负责接收路由变化、匹配并渲染对应组件
  • Navbar.js内部单独嵌套了一个BrowserRouter实例，包裹了Navbar里的跳转Link，这个实例有自己独立的路由状态，它内部的Link触发跳转时，只会修改全局浏览器地址栏的URL，不会把路由变更同步给外层负责匹配组件的路由实例
• 这个机制完全匹配遇到的现象：点Navbar的Link时地址栏URL确实变了（地址栏是浏览器全局属性），但外层Route感知不到路由变化，所以组件不会切换；只有手动刷新页面时，路由实例重新初始化、主动读取地址栏URL，才会正常匹配渲染。而App.js里直接写的Link能正常工作，就是因为它和Route处于同一个Router上下文里。

• 移除Navbar组件内部的BrowserRouter嵌套层，只保留Link组件的引入，不要在业务子组件里重复创建路由实例
• 将顶层BrowserRouter上移到整个应用的最外层，把Navbar、所有Route、Link都纳入同一个路由上下文范围

修复后的参考代码 #

App.js #

import './App.css';
import Navbar from './Navbar/Navbar'
import About from './About/About'
import { Route, Link, BrowserRouter as Router, Switch } from 'react-router-dom'
function App() {
  return (
    <Router>
      <div>
        {/* 整个应用所有路由相关组件都被同一个Router包裹 */}
        <Navbar />
        <Link to="/about">about</Link>
        <Switch>
          <Route exact path="/about">
            <About />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
export default App;

Navbar.js #

import React from 'react'
import './Navbar.css'
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <div>
      <nav className="navbar">
        <div>
          <h1 className="nav_text">ExportGrains</h1>
        </div>
        <ul className="nav_ul">
          <Link to="/about">about</Link>
          <li id="nav_li">HOME</li>
          <li id="nav_li">PRODUCTS</li>
          <li id="nav_li">ABOUT</li>
          <li id="nav_li">CONTACT</li>
        </ul>
      </nav>
    </div>
  )
}
export default Navbar

• 整个项目全局只需要在根层级创建一次BrowserRouter即可，所有子路由相关组件直接通过上下文接收路由状态，不需要也不允许重复嵌套创建BrowserRouter实例
• Link和Route不需要必须写在同一个文件里，只要两者处于同一个Router包裹的子树范围内，就能正常响应路由跳转

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