Как сделать маршрутизацию в реакции js

Question

Я работаю над raact js PO C. У меня есть целевая страница в качестве страницы входа, а затем я хочу перенаправить пользователя на следующую страницу. У меня есть код ниже в файле индекса. js.

import ReactDOM from 'react-dom';
import React from 'react';
import './index.css';
import App from './App';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import LoginComponent from "./Components/LoginComponent";
import User from "./Components/User";


const routing = (
    <Router>
      <div>
        <Route path="/" exact component={LoginComponent} />
        <Route path="/LoginComponent" component={LoginComponent} />
        <Route path="/User" component={User} />
      </div>
    </Router>
  )

ReactDOM.render(routing, document.getElementById("root"));

У меня есть код ниже в файле LoginComponent. js. Дело в том, что я не получаю никакой ошибки в консоли. Когда я нажимаю на кнопку «Войти», опубликованную на сервере, я снова получаю тот же экран входа. Я не уверен, что здесь происходит не так.

import { FormGroup } from "react-bootstrap";
import { Redirect } from 'react-router-dom';
import "./Login.css"
import "bootstrap/dist/css/bootstrap.min.css";
import User from "./User"


class LoginComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: this.props.username,
            password: this.props.password,
            loggedIn : false
        }

        this.handleValidation = this.handleValidation.bind(this);
        this.handleChange = this.handleChange.bind(this);

    }   
    //assign textbox values to props
    handleChange = (e) => {
        this.setState({
            [e.target.name]: [e.target.value]
        })
    }
    //handle input validation
    handleValidation = (event) => {

        if (!this.state.username) {
            this.setState({ error: 'Please enter User Name' }); 
            event.preventDefault();
        }
        else if (!this.state.password) {
            this.setState({ error: 'Please enter Password' });
            event.preventDefault();
        }
        else {
            this.setState({ error: "" });
            //my login service code here which is working fine. I can see a response in console.
            this.setState({ loggedIn: true });
            this.props.history.push("/User");//this line is not working. 
        }
     }


    render() {
        return (
            <div className="Login">
                <form >
                    <FormGroup controlId="email" bsSize="large">
                        <label htmlFor="exampleInputUserName"><b>User Name</b></label>
                        <input type="username" name ="username" className="form-control" id="exampleInputUserName" value={this.props.userName} onChange={this.handleChange} placeholder="Enter User Name"></input>
                        <div><br></br></div>
                    </FormGroup>
                    <FormGroup controlId="password" bsSize="large">
                        <label htmlFor="exampleInputPassword"><b>Password</b></label>
                        <input type="password" name="password" className="form-control" id="exampleInputPassword"  value={this.props.password} onChange={this.handleChange} placeholder="Enter Password"></input>
                        <div><br></br></div>
                    </FormGroup>
                    <button type="submit" onClick={this.handleValidation} className="btn btn-info">Login</button>
        &nbsp;&nbsp;&nbsp;
        <button type="submit" className="btn btn-danger">Cancel</button>
                    <div><br></br></div>
                    <div id="errorDiv">
                        {(this.state.error !== '') ? <span style={{ color: "red" }}>{this.state.error}</span> : ''}
                    </div>  

                </form>
            </div>
        )
    }
}

export default LoginComponent;

Answer 1

Используйте withRouter компонент более высокого порядка и оберните ваш компонент этим. Это даст вам реквизиты маршрутизатора, которые затем могут быть использованы для доставки sh на нужный вам маршрут.

Проверьте документы для получения дополнительной информации: https://reacttraining.com/react-router/web/api/withRouter

Надеюсь, что это решит

Ссылка на песочницу: https://codesandbox.io/s/react-example-1h7jy

import { FormGroup } from "react-bootstrap";
import { Redirect } from 'react-router-dom';
import "./Login.css"
import "bootstrap/dist/css/bootstrap.min.css";
import User from "./User";
import { withRouter } from "react-router-dom";

class LoginComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: this.props.username,
            password: this.props.password,
            loggedIn : false
        }
        this.handleValidation = this.handleValidation.bind(this);
        this.handleChange = this.handleChange.bind(this);

    }  

    //assign textbox values to props
    handleChange = (e) => {
        this.setState({
            [e.target.name]: [e.target.value]
        })
    }

    //handle input validation
    handleValidation = (event) => {
        if (!this.state.username) {
            this.setState({ error: 'Please enter User Name' }); 
            event.preventDefault();
        }
        else if (!this.state.password) {
            this.setState({ error: 'Please enter Password' });
            event.preventDefault();
        }
        else {
            this.setState({ error: "" });
            //my login service code here which is working fine. I can see a response in console.
            this.setState({ loggedIn: true });
            this.props.history.push("/User");//this line is not working. 
        }
     }


    render() {
        return (
            <div className="Login">
                <form >
                    <FormGroup controlId="email" bsSize="large">
                        <label htmlFor="exampleInputUserName"><b>User Name</b></label>
                        <input type="username" name ="username" className="form-control" id="exampleInputUserName" value={this.props.userName} onChange={this.handleChange} placeholder="Enter User Name"></input>
                        <div><br></br></div>
                    </FormGroup>
                    <FormGroup controlId="password" bsSize="large">
                        <label htmlFor="exampleInputPassword"><b>Password</b></label>
                        <input type="password" name="password" className="form-control" id="exampleInputPassword"  value={this.props.password} onChange={this.handleChange} placeholder="Enter Password"></input>
                        <div><br></br></div>
                    </FormGroup>
                    <button type="submit" onClick={this.handleValidation} className="btn btn-info">Login</button>
        &nbsp;&nbsp;&nbsp;
        <button type="submit" className="btn btn-danger">Cancel</button>
                    <div><br></br></div>
                    <div id="errorDiv">
                        {(this.state.error !== '') ? <span style={{ color: "red" }}>{this.state.error}</span> : ''}
                    </div>  

                </form>
            </div>
        )
    }
}

export default withRouter(LoginComponent);