React Router导航至/login路由时页面重载及组件重复加载问题

首先咱们拆解你遇到的两个核心问题：页面整体重载、组件加载两次，这俩问题是关联的，咱们一步步来解决。

1. 页面重载的核心原因：错误使用导航方式 #

你访问 /login 时页面整页刷新，90%的概率是用了原生的 <a href="/login"> 标签跳转，而非 React Router 提供的 <Link> 组件。原生a标签会触发浏览器整页HTTP请求，直接刷新整个应用，完全违背了单页应用的路由逻辑。

解决方法：把所有站内导航的a标签替换成React Router的<Link>组件：

// 先导入Link组件
import { Link } from 'react-router';

// 替换原来的<a href="/login">登录</a>
<Link to="/login">登录</Link>

用<Link>跳转时，React Router会拦截浏览器的默认跳转行为，只更新页面内的组件，不会整页刷新。

2. 组件加载两次的根源：整页刷新+不安全的路由数据获取 #

页面整页刷新本身会让整个React应用重新初始化一次，再加上路由切换时的正常渲染，就会出现“组件加载两次”的错觉。另外你在App组件里获取pageType的方式也存在风险：

const rounteProps = this.props.children.props.route; // 这里还拼写错误，是route不是rounte

当路由处于切换过程中，this.props.children可能还未完全挂载，或者在某些场景下是undefined/数组，直接访问props.route可能触发额外重渲染，甚至报错。

优化后的App组件代码：
我们可以用React.Children.only确保只处理单个子组件，或者通过withRouter高阶组件直接获取路由信息，后者更可靠：

方式一：安全访问子组件的路由属性 #

class App extends Component {
  render() {
    // 先确保子组件存在且是单个元素，避免报错
    let pageType;
    if (this.props.children) {
      const child = React.Children.only(this.props.children);
      pageType = child.props.route?.pageType;
    }

    return (
      <div className="app">
        {pageType === 'checkout' ? <CheckoutHeader /> : <Header />}
        <div className="grid-wrapper site-page content--centered">
          <main className="grid grid--space-y site-main">
            {this.props.children}
          </main>
          <Footer />
          <Loader />
        </div>
      </div>
    );
  }
}

方式二：用withRouter直接获取路由信息（更推荐） #

import { withRouter } from 'react-router';

class App extends Component {
  render() {
    // 获取当前匹配的最后一个路由（也就是当前激活的路由）
    const currentRoute = this.props.routes[this.props.routes.length - 1];
    const pageType = currentRoute.pageType;

    return (
      <div className="app">
        {pageType === 'checkout' ? <CheckoutHeader /> : <Header />}
        <div className="grid-wrapper site-page content--centered">
          <main className="grid grid--space-y site-main">
            {this.props.children}
          </main>
          <Footer />
          <Loader />
        </div>
      </div>
    );
  }
}

// 用withRouter包裹App，让它能获取路由相关props
export default withRouter(App);

验证步骤 #

1. 先把所有跳转/login的链接换成<Link>，确认页面不再整页刷新；
2. 替换App组件的pageType获取逻辑，观察组件是否还会重复加载。

按照这个流程处理，你的问题应该就能解决了。

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