Реагировать: Как перенаправить

Question

Я новичок в React и реализовывал функцию, при которой при нажатии кнопки в методе рендеринга я перехожу к функции foo. В этой функции я отправляю имя пользователя и пароль на сервер.

Если имя пользователя и пароль верны, он возвращает объект JSON, такой как

{"Result":1,"Cookie":"COOKIE!!!"}

Я пытаюсь перенаправить его на другой компонент класса, который я сделал (Flood), если результат равен 1. Может ли кто-нибудь любезно помочь мне

Я пытался перенаправить его после рендеринга и до возврата, но я получаю ошибку

 Error: Invariant failed: You should not use <Redirect> outside a <Router> 

import React from 'react';
import './style.scss';
import LoginImage from './LoginImage.png'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
import {Redirect, Router} from 'react-router-dom'
//import Logfailed from './Logfailed'
import Flood from './Flood'

class UserLogin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {userName:'', password:'', act:'l', flag:0, txt:''};
    this.handleChange1 = this.handleChange1.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

   async handleClick(e) {
    const url = 'http://52.8.557.164/user'
    const data = {username:this.state.userName, password:this.state.password, action:this.state.act};
    try {
        const response = await fetch(url, 
        {
            method: 'POST',
            body: JSON.stringify(data),
            headers: {
                'Content-Type': 'application/json'
            },
        });
        const json = await response.json();
      if(json['Result'] === 1) {
        this.setState({flag: 1, txt:''});
      }
      else {

         this.setState({flag:2, txt:'Wrong username and Password'}); 
      }
        console.log('Success', JSON.stringify(json));
      console.log(json['Cookie']);
    } catch (error) {
        console.error('Error', error);
    }

 }

 handleChange1(e) {
  this.setState({userName: e.target.value})
 }
 handleChange2(e) {
  this.setState({password: e.target.value})
 }


render() {
  if (this.state.flag === 1) {
        return <Redirect to='/Flood' />
    }
    return (
        <div className = 'outer-container' ref={this.props.containerRef}> 
            <div className = 'header'> Login </div>
            <div className="content">
      <div className="image">
              <img src={LoginImage} />
      </div>

            <Form className = 'form'>
        <Form.Group controlId="formBasicEmail" className = 'form-group'>
          <Form.Label style={{marginTop: '90px'}}>Username</Form.Label>
          <Form.Text className="text-muted" htmlFor="username"></Form.Text>
          <input type="text" value = {this.state.userName} name="username" placeholder="username" onChange={this.handleChange1}/>
        </Form.Group>
        <Form.Group controlId="formBasicPassword" className = 'form-group'>
        <Form.Label>Password</Form.Label>
        <Form.Text className="text-muted" htmlFor="password"></Form.Text>
          <input type="password" value = {this.state.password}  name="password" placeholder="password" onChange={this.handleChange2} />
          <br></br>
          <span>{this.state.txt}</span>
        </Form.Group>
        </Form>
            </div>
        <div className="footer">
                <Button variant="outline-primary" size="lg" onClick={this.handleClick} className="btn" block>
                    Login
                </Button>
          </div>
      </div>
    );
}   
}

export default UserLogin;

import React from 'react';
class Flood extends React.Component {
  constructor(props) {
    super(props)
  }

    render() {
        return (
            <h1>gg</h1>
            )}
}

export default Flood;

import React from 'react';
import './App.css';
import UserLogin from './UserLogin';
import Register from './Register'
import { Router, Redirect} from 'react-router-dom'


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      login: true
    };
  }

  componentDidMount() {
    this.rightSide.classList.add("right");
  }


changeState() {
    const { login } = this.state;

    if (login) {
      this.rightSide.classList.remove("right");
      this.rightSide.classList.add("left");
    } else {
      this.rightSide.classList.remove("left");
      this.rightSide.classList.add("right");
    }
    this.setState(prevState => ({ login: !prevState.login }));
  }

render() {
    const {login} = this.state;
    const curr = login ? "Register" : "Login";
    const currentActive = login ? "login" : "register";
  return (
        <div className="App">
          <div className="login">
            <div className="container" ref={ref => (this.container = ref)}>
            {login && (
                <UserLogin containerRef={ref => (this.curr = ref)} />
              )}
            {!login && (
                <Register containerRef={ref => (this.curr = ref)} />
              )}
            </div>
            <RightSide
            curr={curr}
            currentActive={currentActive}
            containerRef={ref => (this.rightSide = ref)}
            onClick={this.changeState.bind(this)}
          />
          </div>
        </div>

  );
}
}

const RightSide = props => {
  return (
    <div
      className="right-side"
      ref={props.containerRef}
      onClick={props.onClick}
    >
      <div className="inner-container">
        <div className="text">{props.curr}</div>
      </div>
    </div>
  );
};

export default App;

Answer 1

BrowserRouter - поставщик, который будет использоваться в React Router для использования всего, что связано с маршрутизацией. Чтобы добавить его в ваш компонент:

import { BrowserRouter as Router } from "react-router-dom";

class App extends React.Component {
  render() {
    return (
      <Router>
        // Rest of the App component here. 
      </Router>
    );
  }
}

Обратите внимание, что в приложении должна быть только одна оболочка Router (как правило), и, следовательно, имеет смысл заключить в нее компонент ввода.

Пример базовой маршрутизации - маршрутизация React

Answer 2

Прежде всего, вам нужно обернуть ваш компонент с помощью тега withRouter

import { withRouter } from 'react-router-dom'

, затем обернуть ваш компонент / класс при экспорте

export default withRouter(yourComponent);

ОК, теперь вернемся кпроблема: чтобы перенаправить, вы можете просто вставить что-то в объект истории

history.push('/redirect-location');