Реагировать Router Dom Link на другой компонент

Question

Я новичок в React в целом, поэтому заранее прошу прощения, если есть простое решение.

У меня есть два компонента:

Приборная панель
- Боковая панель (вызывается на приборной панели)

У меня есть путь, настроенный в Dashboard, и ссылки на моей боковой панели. Когда я нажимаю на ссылку, URL-адрес изменяется, но Dashboard не выполняет повторную визуализацию, поэтому он изменяется только при обновлении страницы. У меня вопрос, есть ли способ через реагирующий маршрутизатор, чтобы я мог настроить свою панель мониторинга на повторную визуализацию при нажатии ссылки в боковой панели?

Импорт

import { BrowserRouter, Route, Link } from 'react-router-dom';

Компонент панели приборов:

<DashboardSidebar />
<BrowserRouter>
    <div>
        <Route exact path="/" component={DashboardLanding} />
        <Route path="/profile" component={ViewUsers} />
        <Route path="/project" component={ViewProjects} />
    </div>
</BrowserRouter>

Компонент боковой панели приборной панели

<BrowserRouter>
    <Link
        to="/"
        className="nav-link" 
        onClick={this.navigation} 
    >
    Link</Link>
    <Link
        to="/profile"
        className="nav-link" 
        onClick={this.navigation} 
    >
    Link</Link>
    <Link
        to="/project"
        className="nav-link" 
        onClick={this.navigation} 
    >
    Link</Link>
<BrowserRouter>

Answer 1

1. Возможно, проблема в: последней строке кода BrowserRouter у вас есть открытый тег вместо закрытия.

2. Второе решение может быть такимпопробуйте изменить оболочку BrowserRouter с тегом div.

Answer 2

Нет необходимости в другом компоненте SideBar. заверните его в div или, возможно, фрагмент.

Answer 3

BrowserRouter должен был содержать компонент DashboardboardSidebar внутри него и все обернуто в один дочерний элемент.

<BrowserRouter>
<>
<DashboardSidebar />
<div>
    <Route exact path="/" component={DashboardLanding} />
    <Route path="/profile" component={ViewUsers} />
    <Route path="/project" component={ViewProjects} />
</div>
</>