Как обновить конкретную навигацию с помощью начальной загрузки?

Question

Я использую , реагирую на начальную загрузку и создаю многостраничный проект, который я обрабатываю с помощью response-router-dom.

Проблема, с которой я сталкиваюсь, связана с вкладками начальной загрузки.

<Tabs defaultActiveKey="Home" id="uncontrolled-tab-example">
  <Tab eventKey="home" title="Home">
    <Sonnet1 />
  </Tab>
  <Tab eventKey="profile" title="Profile">
    <Sonnet2 />
  </Tab>
  <Tab eventKey="contact" title="Contact">
    <Sonnet3 />
  </Tab>
</Tabs>

В следующем коде создается вкладка, на которой можно щелкнуть три разные ссылки и соответственно создать различное содержимое.

Причина, по которой я использую вкладку, заключается в том, что я не хочу перезагружать всю страницу, когда пользователь нажимает «Профиль» или «Контакт».Поэтому все обрабатывается на одной странице «localhost: 3000 / Thepage», и компонент отображается в зависимости от того, что они нажимают.

Проблема, с которой я сталкиваюсь, заключается в том, что если пользователь обновляется, находясь в «Профиле» или «Контакте», он вернется на вкладку «Главная», а не на вкладку, которую видел раньше.

Есть ли способ создать ссылку для этих вкладок и не запускать обновление?Например, когда пользователь находится на главной странице, он будет находиться на странице localhost: 3000 / Thepage / Home.Когда они в профиле, они будут на localhost: 3000 / Thepage / Profile.Так что при запуске обновления они будут перенаправлены на страницу, на которой они были раньше.

РЕДАКТИРОВАТЬ: Только что попробовал решение

import { Link, NavLink } from 'react-router-dom'
import { Navbar, Nav } from 'react-bootstrap'

    <Navbar>
      {/* "Link" in brand component since just redirect is needed */}
      <Navbar.Brand as={Link} to='/'>Brand link</Navbar.Brand>
       <Nav>
        {/* "NavLink" here since "active" class styling is needed */}
        <Nav.Link as={NavLink} to='/' exact>Home</Nav.Link>
        <Nav.Link as={NavLink} to='/another'>Another</Nav.Link>
        <Nav.Link as={NavLink} to='/onemore'>One More</Nav.Link>
       </Nav>
    </Navbar>

К сожалению, он обновляет всю страницу.

Это может быть проблема совместимости или реализации с тем, какЯ справляюсь с реакцией-роутером-домом.В моем index.js я использую следующее:

<BrowserRouter>
    <Switch>
      <Route path="/" component={App} exact />
      <Route path="/About" component={About} exact />
      <Route path="/Contact" component={Contact} exact />
      <Route path="/FAQ" component={FAQ} exact />
      <Route path="/Blog" component={Blog} exact />
      <Route path="/Main" component={Main} exact />
    </Switch>
</BrowserRouter>