React-Router не обновляет URL при перенаправлении - PullRequest
Новая
       32

React-Router не обновляет URL при перенаправлении

0 голосов
/ 06 июля 2018

У меня есть приложение, использующее . У меня есть соответствующая страница, к которой, если вы не вошли в систему, вы не можете получить доступ. Когда пользователь не вошел в систему и пытается перейти на /match, он перенаправляется на /login. Моя проблема в том, что когда пользователь перенаправляется на /login, URL остается как / match. Это вызывает проблемы в другом месте моего кода. Как я могу заставить React-Router обновлять URL, когда пользователь перенаправляется на /login? Я перенаправляю страницу с моего переключателя внутри App.js. Вот пример того, как выглядит мой код: 

<Route
    path='/match'
    component= {
        () => {
            if (this.state.auth) return <HomePage />;
            else return <LoginPage />;
        }
    }
/>

TL; DR

Как можно изменить URL-адрес на /login, если пользователь не вошел в систему при попытке доступа к /match.

Ответы [ 3 ]

0 голосов
/ 06 июля 2018

Вы можете иметь отдельный маршрут для /login и использовать компонент Redirect на вашем маршруте /match, если пользователь не вошел в систему. 

<Route
  path='/match'
  render={
    () => {
      if (this.state.auth) return <HomePage />;
      else return <Redirect to='/login'/>;
    }
  }
/>
<Route
  path='/login'
  render={LoginPage}
/>
0 голосов
/ 06 июля 2018

У вас, вероятно, есть небольшое представление о том, как работает React Router. В вашем примере React Router работает так же, как и должен, поскольку вы просто визуализируете компоненты.

Вы должны использовать <Redirect /> -компонент React Router для перенаправления пользователя на новый URL.

Вы можете достичь желаемого поведения с помощью этого примера кода. 

<Route
  path='/match'
  render={
    () => {
      if(this.state.auth){ return <HomePage /> }
      else { return <Redirect to="/login" /> }
    }
  }
/>
<Route match="login" component={Login} />

Вы также можете достичь такого же поведения внутри компонента программно, используя React Router, предоставленную опору props.history.push('/login') внутри компонента.

0 голосов
/ 06 июля 2018

Логика перенаправления должна быть частью самого компонента, а не конфигурации маршрутов. Чтобы сделать его многоразовым, создайте HOC с логикой перенаправления, а затем просто оберните пути, которые должны быть защищены в конфигурации маршрутов.

...