React-router: изменение в URL, но не в отображаемых компонентах

Question

У меня проблема с реактив-роутером. Это мой /home компонент, первая страница, которую вы видите после входа в систему:

  return(
    <>
      <CustomNavbar />
      <Container fluid>
        { loading ? (
          <div>Loading...</div>
        ) : (
          <Router>
            <ProtectedRoute
              path='/home/mem'
              render={(props) => <MResult
                {...props}
                data={data}
                users={users} />
              }
            />

            <ProtectedRoute
              path='/home/reading'
              render={(props) => <RResult
                {...props}
                data={readingData}
                users={users} />
              }
            />
          </Router>
        )}
      </Container>
    </>
  )

У меня есть таблица, и мне нужно отобразить разные данные, основанные на второй части URL (я использую мой собственный компонент ProtectedRoute для проверки подлинности, но поведение такое же, как у обычного компонента Route).

В компоненте CustomNavbar у меня есть две ссылки:

  return(
    <Navbar bg="primary" variant="dark">
      <Navbar.Brand className='cursor-default'>
        <span style={{marginLeft: "10px"}}></span>
      </Navbar.Brand>
      <Navbar.Toggle />
      <Navbar.Collapse>
        { props.authenticated && (
          <>
            <Button>
              <Link to="/home/reading">Reading</Link>
            </Button>
            <Button>
              <Link to="/home/mem">MemResult</Link>
            </Button>
          </>
        )}
      </Navbar.Collapse>
      <Navbar.Collapse className='justify-content-end'>
        { props.authenticated && (
          <Button onClick={logout}>logout</Button>
        )}
      </Navbar.Collapse>
    </Navbar>
  )

Проблема в том, что если я нажимаю на ссылки в навигационной панели, я вижу, что URL изменяется соответствующим образом, но новый компонент не загружается, я все еще вижу предыдущий. Если я нажму на кнопку браузера refre sh, то загрузится нужный компонент, но как только это произойдет, повторное нажатие на ссылки не изменит ничего, кроме URL.

Как это исправить

Answer 1

Компонент CustomNavbar находится за пределами поставщика маршрутизатора, поэтому Links не может связаться с компонентом Route.

Решение состоит в том, чтобы визуализировать компонент Маршрутизатор на верхнем уровне и настроить CustomNavbar в качестве маршрута по умолчанию

return(
    <Router>
      <Route component={CustomNavbar} />
      <Container fluid>
        { loading ? (
          <div>Loading...</div>
        ) : (
            <ProtectedRoute
              path='/home/mem'
              render={(props) => <MResult
                {...props}
                data={data}
                users={users} />
              }
            />

            <ProtectedRoute
              path='/home/reading'
              render={(props) => <RResult
                {...props}
                data={readingData}
                users={users} />
              }
            />
          </Router>
        )}
      </Container>
    </Router>
  )