React-Router路由切换组件不渲染问题求助（刷新可正常显示）

我一眼就发现问题所在了——你在应用里嵌套了多个BrowserRouter实例，这正是路由切换时组件不渲染的核心原因！

为什么会出现这个问题？ #

React Router的BrowserRouter（或任何Router组件）会创建独立的路由上下文，包含自身的历史记录、当前URL位置等状态。你已经在index.js中用BrowserRouter包裹了整个App，这是正确的顶层路由配置，但在Content.js里又重复添加了另一个BrowserRouter，导致出现两个完全独立的路由系统：

• 外层Router负责响应URL变化，但内层Router完全感知不到这个变化，所以它下面的Route组件不会触发更新
• 刷新页面时，内层Router会重新读取当前URL，因此能正确渲染对应组件

修复步骤 #

只需要移除多余的BrowserRouter实例，确保所有路由相关组件共享同一个顶层路由上下文即可：

1. 修改Content.js

移除BrowserRouter的导入和包裹代码：

import React, { Component } from 'react'
import PropTypes from 'prop-types';
// 移除BrowserRouter的导入，只保留Route和Link
import { Route, Link } from "react-router-dom";

class Content extends Component {
 render() {
 const { title } = this.props;
 return (
 <div>
 {/* 去掉外层的<Router>包裹 */}
 <Route exact path="/client" component={Client} />
 <Route path="/payment" component={Payment} />
 <Route path="/invoice" component={Invoice} />
 </div>
 );
 }
}
export default Content

2. 确认路由上下文覆盖范围

你的NavItemLink组件已经在顶层BrowserRouter的上下文范围内（因为整个App都被index.js里的Router包裹），所以它的Link和Route能正常响应URL变化，不需要额外修改。

关键注意事项 #

在React Router中，整个应用只需要一个顶层Router组件（通常放在入口文件如index.js中），所有Route、Link、NavLink等路由相关组件都必须在这个Router的上下文之下，这样它们才能共享同一个路由状态，正确响应URL的变化。

内容的提问来源于stack exchange，提问作者Leandro Hernández Mira