React学习18----react-router4.x中使用js跳转路由

在 https://blog.csdn.net/zhaihaohao1/article/details/87911954
中必须使用Link(链接)跳转，就是要必须点击，才能跳转。
那么，怎样才能实现，自动跳转，比如，登录后成功后跳转页面

具体步骤如下：
0、安装 cnpm install react-router-dom --save

1、要引入Redirect

import {
BrowserRouter as Router,
Route,
Link,
Redirect,
withRouter
} from "react-router-dom";

2、定义一个flag
this.state = {
loginFlag:false
};

3、render里面判断flag 来决定是否跳转

    if(this.state.loginFlag){

        return <Redirect to={{ pathname: "/" }} />;
    }

4、要执行js跳转

    this.setState({
            loginFlag: true
        })

    通过js改变loginFlag的状态

    loginFlag 的值，改变以后从新render（渲染） 就可以通过Redirect自己来跳转

具体例子：
项目结构：
React学习18----react-router4.x中使用js跳转路由
效果图：

代码：Login.js

import React from 'react';
import {BrowserRouter as Router, Route, Link, Redirect, withRouter} from "react-router-dom";
/*



实现js跳转路由：
文档：https://reacttraining.com/react-router/web/example/auth-workflow

实现步骤：

0、安装 cnpm install react-router-dom --save

1、要引入Redirect

    import {
    BrowserRouter as Router,
    Route,
    Link,
    Redirect,
    withRouter
    } from "react-router-dom";

2、定义一个flag
        this.state = {
                loginFlag:false
        };

3、render里面判断flag 来决定是否跳转

        if(this.state.loginFlag){

            return <Redirect to={{ pathname: "/" }} />;
        }

4、要执行js跳转

        this.setState({
                loginFlag: true
            })

        通过js改变loginFlag的状态

        loginFlag 的值，改变以后从新render（渲染） 就可以通过Redirect自己来跳转

*/


class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: '登录页面',
            loginFlag: false,
        };
    }

    doLogin = (e) => {
        e.preventDefault();
        let username = this.refs.username.value;
        let password = this.refs.password.value;
        //打印拿到的值
        console.log(username, password)
        if (username == 'admin' && password == '123456') {
            //登录成功   跳转到首页
            this.setState({
                loginFlag: true
            })
        } else {
            alert('登录失败')
        }
    }

    render() {
        if(this.state.loginFlag){
            // 跳转到 Home 页面
            return <Redirect to='/' />;
            //这样写也可以
            // return <Redirect to={{ pathname: "/" }} />;
        }
        return (

            <div>
                <br/> <br/> <br/>
                <form onSubmit={this.doLogin}>
                    <input type="text" ref="username"/> <br/> <br/>
                    <input type="password" ref="password"/> <br/> <br/>
                    <input type="submit" value="执行登录"/>
                </form>
            </div>
        );
    }
}

export default Login;

App.js

import React, { Component } from 'react';
import logo from './assets/images/logo.svg';
import './assets/css/App.css';
import Home from "./components/Home";
import Login from "./components/Login";
import {BrowserRouter as Router, Route, Link, Redirect, withRouter} from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <div>

            {/*配置路由*/}
            {/* 例如：http://localhost:3000/ 加载的就是Home组件 */}
            <Route exact path="/" component={Home}/>
            <Route path="/login" component={Login}/>
          </div>
        </Router>

      </div>
    );
  }
}

export default App;

Home.js

import React from  'react';
class Home extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            title:'Home',
        }
    }
    render() {
        return(
            <div>{this.state.title}</div>
        );
    }

}
export default Home;

源码下载：
rdemo18
https://download.csdn.net/download/zhaihaohao1/10980497

React学习18----react-router4.x中使用js跳转路由

相关推荐