Django и React: как перенаправить на главную страницу после успешного входа в систему

Я создаю веб-приложение для системы входа в систему, используя react + django. Мой вопрос в том, как я могу перенаправить пользователя на главную страницу, если авторизация прошла успешно.

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

class Login extends Component {


  state = {
    credentials: {username: '', password: ''}
  }

  login = event => {
    fetch('http://127.0.0.1:8000/auth/', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(this.state.credentials)
    })
    .then( data => data.json())
    .then(
      data => {
        this.props.userLogin(data.token);
      }
    )
    .catch( error => console.error(error))
  }

  register = event => {
    fetch('http://127.0.0.1:8000/api/users/', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(this.state.credentials)
    })
    .then( data => data.json())
    .then(
      data => {
        console.log(data.token);
      }
    )
    .catch( error => console.error(error))
  }
  inputChanged = event => {
    const cred = this.state.credentials;
    cred[event.target.name] = event.target.value;
    this.setState({credentials: cred});
  }

  render() {
    return (
      <div>
        <h1>Login user form</h1>

        <label>
          Username:
          <input type="text" name="username"
           value={this.state.credentials.username}
           onChange={this.inputChanged}/>
        </label>
        <br/>
        <label>
          Password:
          <input type="password" name="password"
           value={this.state.credentials.password}
           onChange={this.inputChanged} />
        </label>
        <br/>
        <button onClick={this.login}>Login</button>
        <button onClick={this.register}>Register</button>
      </div>
    );
  }
}

вам нужно использовать хук в react dom router :

посмотрите этот ответ, чтобы получить больше помощи :

реагировать на гибель роутера

но для вас id React-Router v6 вы можете сделать следующее:


import { useNavigate } from "react-router-dom";

navigateIfSuccess() {
  let navigate = useNavigate();
  // Somewhere in your code, e.g. inside a handler:
  navigate("/your-home-page"); 
}

и в ответе вы можете проверить, если токен ? то вы можете вызвать эту функцию :

вот так :


  .then(
      data => {
        if (token)
          {
           navigateIfSuccess()
          }
      }
Вернуться на верх