ReactJS-在进入新页面时加载不同的组件

Question

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

我已经创建了三个组件，并将它们呈现到主页上。当我点击about链接时，我想加载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"));

中间人.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;

Answer 1

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

现在，为了给出更具体的答案，您应该将App组件封装在BrowserRouter中。您的路由可能在Switch组件内，为了实现您希望实现的Header行为，我建议您检查此问题的答案。