ReactJS - 转到新页面时加载不同的组件答案

【问题标题】：ReactJS - Load different component when go to new pageReactJS - 转到新页面时加载不同的组件
【发布时间】：2022-01-02 08:04:43
【问题描述】：

大家晚上好。我是 ReactJS 的新手，我不明白如何在每个页面加载不同的内容，同时有一些固定的部分，例如标题（点击链接后）。

我创建了三个组件并将它们呈现到主页。当我单击关于链接时，我只想加载 Header & Learn.js 组件。我该如何处理？

非常感谢！

index.js

import React from "react";
import ReactDOM from "react-dom";


import Header from './components/header'
import MiddleMan from './components/middleman'
import BottomHero from './components/bottomhero'
import './web.css';


function App(){
    return (
        <React.Fragment>
            <Header />
            <MiddleMan />
            <BottomHero />
        </React.Fragment>
    );
}

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

middleman.js

import React, { Component } from 'react';
import Learn from './learn';

import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link,
  } from "react-router-dom";

class MiddleMan extends React.Component {
    render() {
        return (
            <div className="middle JV--row JV--a--center JV--spacer">
                <Router>
                    <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>
                    <Routes>
                        <Route path="about" element={<Learn/>}></Route>
                    </Routes>
                </Router>
            </div>
        );
    }
}

export default MiddleMan;

learn.js

import React from 'react';
import Header from './header'

class Learn extends React.Component {

    render(){
        return (
            <h2>BBBBBBBBBBBBBBBBBB</h2>
        );
    }

}
export default Learn;

【问题讨论】：

标签： reactjs

【解决方案1】：

考虑到react-router-dom 的使用方式，您的应用程序结构有点奇怪。我建议你阅读他们的documentation！

现在，为了给出更具体的答案，您应该将App 组件包装在BrowserRouter 中。您的路线可能在 Switch component 内，并且要实现您希望实现的 Header 行为，我建议您检查此 question 的答案。

【讨论】：