如何在 Header、Footer 等组件中使用 React Router 而不是 App.js答案

【问题标题】：How to use React Router in Header, Footer and etc components instead of App.js如何在 Header、Footer 等组件中使用 React Router 而不是 App.js
【发布时间】：2020-06-21 23:55:11
【问题描述】：

通过我对 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;

可以想象，我不是唯一一个想要在整个网站上设置带有链接的路线的开发人员。

如果没有给我完整的答案，有人可以发表评论并举出与此类似的好例子吗？

【问题讨论】：

也许是时候在代码中引入 props 了？

标签： reactjs react-router react-router-v4 react-router-dom react-component

【解决方案1】：

我不确定您的期望是什么，但这里有一些意见：

当路由更改时，Router 元素中的内容将重新呈现。因此，如果您的 Header 元素中有 Router 元素，则当路由更改（用户单击链接）时，只会重新渲染您的 Header 元素。

可以将 Router 元素放在 App 元素中，您仍然可以将链接放在 header 元素中。

【讨论】：

因为我正在学习这个帖子，所以没有必要对帖子投反对票。感谢您的意见，我将在本周晚些时候对其进行审核。