В библиотеке React Router, react-router-dom, доступно несколько методов для выполнения перенаправлений. Вот некоторые из наиболее часто используемых методов:

1. Компонент перенаправления. Компонент Redirectможно использовать для отрисовки перенаправления в методе рендеринга вашего компонента React. Ему требуется свойство to, которое указывает URL-адрес для перенаправления. При отображении он перейдет по указанному URL-адресу.

import { Redirect } from 'react-router-dom';
class MyComponent extends React.Component {
  render() {
    return <Redirect to="/new-url" />;
  }
}

2. history.push: метод pushиз объекта historyможно использовать для программного перехода к новому URL-адресу и замены текущей записи в истории браузера.

import { useHistory } from 'react-router-dom';
function MyComponent() {
  const history = useHistory();
  const handleRedirect = () => {
    history.push('/new-url');
  };
  return <button onClick={handleRedirect}>Redirect</button>;
}

3. history.replace: метод replaceиз объекта historyаналогичен push, но заменяет текущую запись в истории браузера вместо добавляем новый.

import { useHistory } from 'react-router-dom';
function MyComponent() {
  const history = useHistory();
  const handleRedirect = () => {
    history.replace('/new-url');
  };
  return <button onClick={handleRedirect}>Redirect</button>;
}

4. Использование маршрута. Вы также можете использовать компонент Routeдля условной визуализации перенаправления. Он принимает свойство pathи свойство render, и когда текущий URL-адрес соответствует path, он отрисовывает компонент, возвращаемый . >renderреквизит.

import { Route, Redirect } from 'react-router-dom';
function MyComponent() {
  return (
    <Route path="/old-url" render={() => <Redirect to="/new-url" />} />
  );
}

5. Использование перехватчика useHistory: перехватчик useHistoryможно использовать для доступа к объекту historyв функциональных компонентах, что позволяет выполнять перенаправления.

import { useHistory } from 'react-router-dom';
function MyComponent() {
  const history = useHistory();
  const handleRedirect = () => {
    history.push('/new-url');
  };
  return <button onClick={handleRedirect}>Redirect</button>;
}