Перенаправление на страницу, с которой вы пришли

Question

Я создал защищенный компонент маршрута, который, если он не прошел проверку подлинности, будет перенаправлен на «/», что является логином. И это прекрасно работает. У меня вопрос, как я могу ограничить путь "/", если пользователь аутентифицирован.

Например. Я хочу go до '/welcome', и я нажимаю на внешнюю ссылку, которая отправляет меня на '/welcome', но, поскольку я не аутентифицирован, он перенаправляет меня на '/', где я аутентифицируюсь. После того как я закончил аутентификацию, он должен перенаправить меня на '/welcome', мой первоначальный путь.

Как? Теперь мне нужен жесткий путь к коду, я хочу отправить меня по пути, по которому я был изначально.

Если я вручную изменяю путь в браузере на '/welcome', если я нажимаю кнопку «Назад», это приводит меня вернуться к '/' и я не хочу этого. Он должен оставаться на '/welcome', учитывая, что я аутентифицирован.

Я пробовал что-то вроде этого:

<Route exact path="/">
    {isAuth ? <Redirect to="/welcome" /> : <Auth />}
</Route>

Дело в том, что я не хочу перенаправлять жесткий код на '/ добро пожаловать », потому что, возможно, я пришел по другому пути, например, '/example'.

Есть предложения?

Answer 1

Попробуйте сделать что-то вроде этого.

const PrivateRoute = ({ component: Component, isLoggedIn, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isLoggedIn ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{ pathname: '/', state: { from: props.location } }}
        />
      )
    }
  />
);

И затем в вашем компоненте входа в систему, как только аутентификация будет выполнена, сделайте следующее при перенаправлении. Если указан pathName, он будет go, откуда он пришел, в моем случае он будет перенаправлен на /dash.

<Redirect
          to={
            this.props.location.state && this.props.location.state.from.pathname
              ? this.props.location.state.from.pathname
              : "/dash"
          }
        />

Я использую защищенный маршрут внутри маршрутизатора как

<PrivateRoute
          path="/someEndpoint"
          component={SideMenu}
          isLoggedIn={props.isLoggedIn}
        />

Я надеюсь, что смогу вам помочь.