Как условно установить маршруты в реакции с использованием реактивного маршрутизатора v4?

Question

Итак, есть 4 компонента.Navbar всегда должен быть видимым, auth должен быть на path = "/", а два других должны быть видны после аутентификации.Компонент Auth по завершении аутентификации сохраняет токен пользователя в localStorage.В панели навигации после завершения аутентификации есть кнопка signOut, которая удаляет токен из localStorage.

Как я могу сделать так, чтобы при сохранении токена в LS он переходил в «/ devices» и пользователь оставалсявошел в систему, но когда токен удален, он возвращается к '/'?Конечно, навигационная панель должна быть видна всегда.

При таком подходе после входа в систему я получаю пустой экран на «/ devices».Я пробовал что-то подобное в return:

         {localStorage.getItem("token") !== null ? (
            <Redirect to="/devices" />
          ) : (
            <Redirect to="/" from="/devices" />
          )} 

, но постоянно получаю предупреждение, что пытаюсь перенаправить с пути, по которому я уже иду.Я работаю почти так, как должно, после входа в систему отображаются устройства, а когда я выхожу, он возвращается на страницу авторизации, но затем не принимает правильные учетные данные пользователя, и я получаю ошибку http.После того, как я обновил страницу, все стало хорошо.

Я новичок в маршрутизации, и мне трудно разобраться.

Заранее спасибо.

  ReactDOM.render(
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>,
      document.getElementById("root")
    );

class App extends Component {
  render() {
    if (localStorage.getItem("token") !== null) {
      return <Redirect to="/devices" />;
    }
    return (
      <div>
        <Route path="/" component={Navbar} />
        <div>
          <Route path="/" exact component={Auth} />
          <Route path="/devices" exact component={Device1} />
          <Route path="/devices" exact component={Device2 } /> 
        </div>
      </div>
    );
  }
}