ReactJS点击路由跳转新页面如何保留固定头部并加载指定组件

解决方案 #

你的核心问题是路由层级配置错误，固定公共组件和可变内容区的位置拆分不对，按以下步骤修改即可：

1. 调整路由根节点位置，将Router从MiddleMan组件移到App组件外层，保证所有路由逻辑在同一个Router上下文下生效
2. 把固定公共组件Header放在Routes外部，保证所有路由切换时Header都不会重渲染
3. 用Routes分别匹配首页和about页的内容，首页渲染原来的MiddleMan+BottomHero，about页仅渲染Learn组件
4. 移除MiddleMan组件内嵌套的Router，避免多重路由上下文冲突，调整Link的路径为绝对路径避免匹配错误

修改后的代码 #

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Header from './components/header'
import MiddleMan from './components/middleman'
import BottomHero from './components/bottomhero'
import Learn from './components/learn'
import './web.css';

function App(){
    return (
        <Router>
            {/* 公共Header，所有页面保留 */}
            <Header />
            {/* 可变内容区，根据路由切换 */}
            <Routes>
                {/* 首页路由，显示原有后两个组件 */}
                <Route path="/" element={
                    <React.Fragment>
                        <MiddleMan />
                        <BottomHero />
                    </React.Fragment>
                } />
                {/* about页路由，仅显示Learn组件 */}
                <Route path="/about" element={<Learn/>} />
                {/* 后续project、exp页面直接在此处新增Route配置即可 */}
            </Routes>
        </Router>
    );
}

ReactDOM.render(<App />, document.querySelector(".container"));

middleman.js

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

class MiddleMan extends React.Component {
    render() {
        return (
            <div className="middle JV--row JV--a--center JV--spacer">
                <ul>
                    <li><Link to="/about">ABOUT ME</Link></li>
                    <li><Link to="/project">PROJECTS</Link></li>
                    <li><Link to="/exp">PR. LANGUAGES / TECHNOLOGIES</Link></li>
                </ul>
            </div>
        );
    }
}

export default MiddleMan;

learn.js

import React from 'react';

class Learn extends React.Component {
    render(){
        return (
            <h2>BBBBBBBBBBBBBBBBBB</h2>
        );
    }
}
export default Learn;

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