页面重载时Route组件在每个navItem中重复加载问题咨询

这个问题我之前排查过类似场景，核心问题出在你对React Router的使用方式上：

1. 重复渲染<Router>组件 #

你的navitem组件中，每次实例化都会渲染一个独立的<Router>。但React Router的设计逻辑是**整个应用只需要一个顶层的Router（比如BrowserRouter）**来管理全局路由状态。当多个Router同时存在时，每个Router都会独立监听URL变化、维护自己的路由上下文。页面重载后，所有navitem里的Router都会检测到当前URL是/textversion，进而各自触发内部的<Route>匹配，导致每个navitem都加载了TextVersion组件。

2. <Route>的放置位置错误 #

路由规则（Route）应该集中配置在应用的顶层区域，和Router同级，而不是嵌套在每个导航项组件里。导航项的职责只应该是提供跳转链接（Link），而不是负责路由匹配和组件渲染。

我们需要重构代码，把Router和Route的管理集中到应用顶层，让navitem只专注于导航链接的渲染：

步骤1：重构应用顶层组件（比如App.js） #

把Router和所有Route集中在这里，作为全局路由配置：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import NavItem from './NavItem';
import TextVersion from './TextVersion';

function App() {
  return (
    <Router>
      {/* 导航栏区域：渲染所有导航项 */}
      <div className="navigation-bar">
        <NavItem dName="Text Version" url="textversion" />
        {/* 可以添加其他NavItem实例 */}
      </div>

      {/* 路由匹配区域：集中管理所有路由规则 */}
      <Switch>
        <Route path="/textversion" exact component={TextVersion} />
        {/* 这里可以添加其他路由，比如首页、其他页面 */}
      </Switch>
    </Router>
  );
}

export default App;

步骤2：简化navitem组件 #

去掉多余的Router和Route，只保留导航链接相关代码：

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

class NavItem extends Component {
  state = { isShown: false }

  render() {
    return (
      <div href={'#' + this.props.dName} className="navItem">
        <Link to={"/" + this.props.url}>{this.props.dName}</Link>
      </div>
    );
  }
}

export default NavItem;

• 顶层的单个Router统一管理全局路由状态，避免了多个Router之间的状态冲突，确保URL变化时只有一套路由匹配逻辑在工作。
• <Switch>组件会确保只有第一个匹配的Route会渲染组件，进一步避免了多个Route同时触发的问题（即使你用了exact，Switch也让路由结构更清晰规范）。
• 导航项和路由规则解耦，各自专注自己的职责，代码结构更易维护。

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