React-Router v4问题：URL更新但组件未重新渲染

嘿，我看了你的代码后立刻发现了问题所在——你在应用中嵌套了多个BrowserRouter实例，这就是导致路由跳转后组件无法更新的核心原因！

问题根源分析 #

React Router的BrowserRouter是整个路由系统的核心容器，它负责监听浏览器URL的变化，并根据配置的路由规则匹配渲染对应的组件。当你在index.js里已经用BrowserRouter包裹了整个<App />，又在Main.js里再次嵌套了一个<Router>（也就是BrowserRouter）时，就会造成路由上下文的冲突：点击Link时虽然URL发生了变化，但内层的Router无法正确和外层的路由上下文同步，最终导致页面组件没有触发更新。

解决方案：只保留一个根路由容器 #

我们只需要移除Main.js中的BrowserRouter，让路由配置直接在外层的路由上下文里工作即可。

修改后的Main.js代码：

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom'; // 推荐加上Switch优化路由匹配
import Component1 from './components/Component1';
import Component2 from './components/Component2';
import Component3 from './components/Component3';
import Component4 from './components/Component4';

class Main extends Component {
  render() {
    return (
      <Switch> {/* 使用Switch确保每次只渲染第一个匹配的路由 */}
        <Route exact path='/' component={Component1} />
        <Route path='/ts' component={Component2} />
        <Route path='/cs' component={Component3} />
        <Route path='/cw' component={Component4} />
      </Switch>
    );
  }
}

export default Main

额外优化建议 #

加上Switch组件是个好习惯，它会从上到下匹配路由规则，一旦找到第一个匹配的路由就停止匹配，避免多个符合条件的路由组件同时渲染，让路由逻辑更清晰高效。

修改完成后，点击导航栏的Link时，外层的BrowserRouter就能正确监听URL变化，匹配对应的路由组件并更新页面内容啦！

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