Используйте onClick для изменения пути в компоненте, не являющемся маршрутизатором, в React

Question

У меня есть приложение React со следующей упрощенной структурой:

function App(props) {
    return (
        <Navbar />
        <Router>
            <Route exact path="/profile/" component={Profile} />
            <Route exact path="/" component={Home} />
        </Router>
    );
}

В компоненте Navbar у меня есть кнопка для logout, что означает, что мне нужно:

1. Удалите токен аутентификации из хранилища (просто выполните logi c для общего случая) и
2. Перенаправьте пользователя на страницу входа.

Я попытался использовать onClick из эту кнопку и используйте this.props.history.push('/'), чтобы изменить путь, но это не работает (он жалуется, что history - это undefined), поскольку моя панель навигации определена вне маршрутизатора.

Мой вопрос: Можно ли переместить Navbar внутрь компонентов моего маршрутизатора и повторить его, пока он одинаков на всех страницах? Или есть какое-нибудь решение с защитой от дублирования, которое я могу использовать для изменения пути в моем браузере?

Answer 1

Можно вставить <Navbar> в маршрутизатор. Моя установка имеет тенденцию быть

<Router>
    <div className="app-container">
      <Navigation />
      <div className="content">
        <Switch>
          (Routes go here)
        </Switch>
      </div>
    </div>
</Router>

Answer 2

Да! Попробуйте использовать <Switch> в маршрутизаторе и <Link> внутри вашей панели навигации

export default function App() {
  return (
    <Router>
      <Navbar />
        // inside Navbar try using <Link to="/">Logout</Link>
        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch> 
    </Router>
  );
}

https://reacttraining.com/react-router/web/guides/quick-start

Answer 3

Маршруты прослушивают api истории, предоставленные контекстом маршрутизатора, и, поскольку Navbar отображается вне его, они не отражают изменения.

Решение состоит в том, чтобы обернуть маршрутизатор вокруг навигационной панели, а также отобразить NAvbar как маршрут по умолчанию

function App(props) {
    return (
       <Router>
          <>
            <Route component={Navbar}/>
            <Route exact path="/profile/" component={Profile} />
            <Route exact path="/" component={Home} />
          </>
        </Router>
    );
}