Можно ли передавать реквизиты из React Link в функциональный компонент?

Question

У меня есть страница регистрации / входа, и я хочу перенаправить пользователя на последнюю страницу, которую он посетил на сайте перед тем, как он попытался зарегистрироваться / войти (или в свой профиль, если он пришел из другого домена). Мой код в основном выглядит так:

Ссылка, которая ведет на страницу

<Link to="/signup">Sign up</Link>

Сама страница

export default function SignupPage(input){
       //code for signing in/up
}

Моя проблема в том, что я не уверен, как передать предыдущий путь в RegistrationPage. Кажется, что ссылка передает свои предопределенные данные, и я подумал об использовании функции goBack, но тогда я не смог бы перенаправить в профиль, если пользователь пришел из другого домена. Есть ли способ сделать без изменения RegistrationPage на класс? Я думал, что может быть способ с крючками, но я не уверен.

Answer 1

Вы можете передать состояние по ссылке:

<Link
  to={
    pathname: "/signup",
    state: {
      referrer: history.location, // save the current location and pass with route push
    }
  }
>
  Sign up
</Link>

Затем в компоненте распаковать состояние местоположения из объекта истории:

• , если прошло как предоставленный prop const referrer = props.history.location.state.referrer;
• с использованием ловушки, если вложенный const { location: { state: { referrer } } = useHistory();

Затем визуализируйте Redirect или history.replace, чтобы перенаправить пользователя туда, откуда он пришел

• <Redirect to={referrer} />
• history.replace({ pathname: referrer });

Я создаю служебную функцию для обработки и возврата реферера из объекта history.

const getReferrer = history =>
  (history.location &&
    history.location.state &&
    history.location.state.referrer) ||
  '/'; // return home if no referrer

Answer 2

Стандартный способ сделать это - использовать параметр запроса для захвата предполагаемого места назначения вашего пользователя до того, как вы перенаправили его на страницу входа в систему, чтобы вы могли затем отправить их в назначенное место назначения после того, как они вошли в систему.

Если вы используете react-router, вы можете получить текущее местоположение от объекта history, который можно получить с помощью Hook или HO * 1032. *. Если вы используете другую библиотеку маршрутизации, она, вероятно, будет иметь документацию для получения history.

Обычно это делается с <Redirect to={signUpPath}/>, но вы можете применить эту же концепцию к <Link ...> также.

Возьмите желаемое место от объекта history или window и создайте ссылку, чтобы она выглядела примерно так:

const redirectPath = ...;  //capture/build the path of where to return the user to
<Link to={"/signup?redirectTo={redirectPath}"}>Sign up</Link>

На странице регистрации, Затем вы должны получить параметр запроса redirectTo из текущего URL (через history.location.search, если вы используете react-router):

//getReturnUrl would just pull the url from the search string.  you could also use window.location
const destination = getReturnUrl(history.location.search);
history.replace(destination);

, а затем отправить туда пользователя после того, как он вошел в систему. , Если пути перенаправления нет, то они, вероятно, не были получены из вашего приложения, поэтому просто отправьте их в представление по умолчанию.

Примечание: использование history.replace() вместо более распространенного history.push() сохраняет регистрацию отображение страницы в заднем стеке пользователя.