如何在页眉，页脚等组件中代替App.js使用React Router

Question

通过我对React Router的研究，似乎每个在线的示例React Router代码始终存储在App.js文件中。

如果您要使用路由器在侧边栏，页眉或页脚中链接，该怎么办？

具体地说，这是我正在学习的实现React Router的示例：https://www.freecodecamp.org/news/a-complete-beginners-guide-to-react-router-include-router-hooks/

所需的结果：使用组件attribute将路线链接到站点地图页面。

App.js

import React from 'react';
import Header from './components/Header';
import Hero from './components/Hero';
import Main from './components/Main';
import Footer from './components/Footer';
import Breadcrumbs from './components/Breadcrumbs';
import Recent from './components/Recent';

function App() {
    return (
        <div className="App">
            <Header/>
            <Breadcrumbs/>
            <Hero/>
            <Main/>
            <Recent/>
            <Footer/>
        </div>
    );
}

export default App;

Footer.js

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import SitemapPage from '../components/pages/SitemapPage';

const Footer = () => {
    return(
        <footer>
            <Container id="footer">
                <Row>
                    <Col className="col menu" xs="6" md="12">
                        <p className="text-right">
                            <BrowserRouter>
                                <Link to="/sitemap/">Sitemap</Link>
                                <a href="/">Terms</a>
                                <a href="/">Privacy</a>
                                <Route path="/sitemap/" component={SitemapPage} />
                            </BrowserRouter>
                        </p>
                    </Col>
                </Row>
            </Container>
        </footer> 
    );
};

export default Footer;

SitemapPage.js

import React from 'react';
import Header from '../Header';
import Breadcrumbs from '../Breadcrumbs';
import Footer from '../Footer';

const SitemapPage = () => {
    return(
        <div className="sitemap page">
            <Header />
            <Breadcrumbs />
            <p>Sitemap page</p>
            <Footer />
        </div> 
    );
};

export default SitemapPage;

可以想象，我不是唯一想设置整个网站链接路径的开发人员。

没有给我完整的答案，有人可以发表一个与此相似的好例子发表评论吗？

Answer 1

[Router元素将在路线改变时重新呈现。因此，如果您的Header元素中包含Router元素，则当路由更改（用户单击链接）时，将仅重新呈现Header元素。

可以将Router元素放在App元素中，但仍然可以将链接放在标头元素中。