Как использовать React Router в компонентах Header, Footer и et c вместо App. js

Question

Благодаря исследованию, которое я провел на React Router, кажется, что каждый пример, который находится в сети, код React Router всегда сохраняется в файле App.js.

Что если вы хотите использовать маршрутизаторы для ссылок в боковой панели, верхнем или нижнем колонтитулах?

В частности, это пример, на котором я учусь реализовывать React Router:
https://www.freecodecamp.org/news/a-complete-beginners-guide-to-react-router-include-router-hooks/

Желаемый результат: привязать маршрут к странице Sitemap с компонентом attribute.

Приложение. 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;

Нижний колонтитул. 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 будет повторно визуализировать при изменении маршрута. Поэтому, если у вас есть элемент Router в вашем элементе Header, при изменении маршрута (пользователь щелкает ссылку) будет перерисован только ваш элемент Header.

Это нормально, когда ваш элемент Router находится в элементе App. и все же вы можете поместить свою ссылку в элемент заголовка.