Как сделать перенаправление на исходную страницу после авторизации в react.js?

@kyleigh_runte 

В React.js вы можете использовать компонент высшего порядка (Higher-Order Component, HOC), который будет проверять, авторизован ли пользователь. Если он не авторизован, компонент перенаправляет пользователя на страницу авторизации. После авторизации, вы можете перенаправить пользователя на исходную страницу.

Вот пример кода, который перенаправляет пользователя на страницу авторизации, если он не авторизован:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route {...rest} render={(props) => (
    isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
);

export default PrivateRoute;

В этом примере компонент PrivateRoute проверяет, авторизован ли пользователь (isAuthenticated). Если да, компонент позволяет пользователю просмотреть исходную страницу (<Component {...props} />). Если нет, компонент перенаправляет пользователя на страницу авторизации (<Redirect to='/login' />).

После авторизации, вы можете использовать history.push для перенаправления пользователя на исходную страницу. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

import React from 'react';
import { useHistory } from 'react-router-dom';

const LoginPage = () => {
  const history = useHistory();

  const handleLogin = () => {
    // После успешной авторизации
    history.push('/dashboard');
  }

  return (
    <div>
      <h1>Авторизация</h1>
      <button onClick={handleLogin}>Войти</button>
    </div>
  );
};

export default LoginPage;

В этом примере компонент LoginPage использует useHistory для получения объекта history. После успешной авторизации, компонент вызывает history.push('/dashboard'), чтобы перенаправить пользователя на страницу dashboard.