如何在 React JS 中进行路由

Question

我正在研究 raact js POC。我将登陆页面作为登录页面，然后想将用户重定向到下一页。我在 index.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 高阶组件，并用它包装您的组件。它会给你路由器道具，然后可以用来推送到你想要的路线。

查看文档以获取更多信息：https://reacttraining.com/react-router/web/api/withRouter

希望这能解决

A link 到沙箱：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);

如何在 React JS 中进行路由

How to do a routing in react js

javascript

reactjs

routing

routes