Reactjs之实现js跳转路由

1、新增知识

/*
实现js跳转路由：https://reacttraining.com/react-router/web/example/auth-workflow
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跳转
        通过js改变loginFlag的状态
        改变以后从新render 就可以通过Redirect自己来跳转
*/

2、代码实现案例

import React, { Component } from 'react';
import {Redirect} from "react-router-dom";
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            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){
            // return <Redirect to={{ pathname: "/" }} />;
            return <Redirect to='/' />;
        }
        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;

3、嵌套路由知识点

       return <Route  key={key}  path={route.path} 
                    render={props => (
                      // pass the sub-routes down to keep nesting
                      <route.component {...props} routes={route.routes} />
                    )}
                    />

4、嵌套路由案例，App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './assets/css/index.css';
import routes from './model/router.js';
class App extends Component {
  render() {
    return (
      <Router>
        <div>
            <header className="title">
                <Link to="/">首页组件</Link>
                <Link to="/user">用户页面</Link>
                <Link to="/shop">商户</Link>
                <Link to="/news">新闻</Link>
            </header> 
            {
              routes.map((route,key)=>{
                  if(route.exact){
                    return <Route key={key} exact path={route.path}                     
                    // route.component     value.component   <User  {...props}  routes={route.routes} />
                    render={props => (
                      // pass the sub-routes down to keep nesting
                      <route.component {...props} routes={route.routes} />
                    )}
                    />
                  }else{
                    return <Route  key={key}  path={route.path} 
                    render={props => (
                      // pass the sub-routes down to keep nesting
                      <route.component {...props} routes={route.routes} />
                    )}
                    />
                  }
              })
            }            
        </div>
      </Router>
    );
  }
}

export default App;

5、router.js文件

let routes = [
    {
      path: "/",
      component: Home,
      exact:true
    },
    {
      path: "/shop",
      component: Shop
    },
    {
      path: "/user",
      component: User,  
      routes:[   /*嵌套路由*/
        {
          path: "/user/",
          component: UserList
        },
        {
          path: "/user/add",
          component: UserAdd
        },
        {
          path: "/user/edit",
          component: UserEdit
        }
      ]
    },
    {
      path: "/news",
      component: News
    }
];

export default routes;