React router 4.x

React router

• 在gitHub上，学会找官方文档，看文档
• 官方地址

安装

npm install react-router-dom --save

导入模块

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

导入文件，配置路由–基础

import React, { Component } from 'react';
import { BrowserRouter as Router, Route,Link } from "react-router-dom";
import Home from './components/Home'
import News from './components/News'
class App extends Component {
  render() {
    return (
      <Router>
      <div>
      <ul>
          <li>
          // link跟<a href>差不多
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/news">News</Link>
          </li>
        </ul>
        <hr/>
        // 根据url变换
        // exact 严格匹配  /
        <Route exact path="/" component={Home} />
        <Route path="/news" component={News} />
      </div>
    </Router>
    );
  }
}

export default App;

get传值和动态路由

• get传值

// App.js
import Product from './components/Product'
import ProductDetail from './components/ProductDetail'
<Route path="/product" component={Product} />
<Route path="/productDetail" component={ProductDetail} />

//Product.js
import React, { Component } from 'react'
import {  Link } from "react-router-dom";
export default class Product extends Component {
    constructor(props){
        super(props)
        this.state = {
            list:[
                {
                    id:1,
                    title:"产品标题1"
                },
                {
                    id:2,
                    title:"产品标题2"
                },
                {
                    id:3,
                    title:"产品标题3"
                },
                {
                    id:4,
                    title:"产品标题4"
                }
            ]
        }
      }    
  render() {
    return (
      <div>
        我是产品列表
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                    <li key={index}> <Link to={`/productDetail?id=${item.id}`}>{item.id}---{item.title}</Link></li>
                    )
                    
                })
            }
            
        </ul>
      </div>
    )
  }
}


//ProductDetail.js
import React, { Component } from 'react'
import Url from 'url'

export default class ProductDetail extends Component {

    componentDidMount(){
         console.log(this.props,"productprops")
        console.log(this.props.location.search)
        console.log(Url.parse(this.props.location.search),"url-parse")
        console.log(Url.parse(this.props.location.search,true).query.id)
        //一种是自己处理  ?id=1
        // npm i url --save
    }  
  render() {
    return (
      <div>
        我是产品详情
      </div>
    )
  }
}

• 动态路由

 // App.js
import News from './components/News'
import NewsDetail from './components/NewsDetail'

<Route path="/newsDetail/:id" component={NewsDetail} />
        
//News.js
import React, { Component } from 'react'
import {  Link } from "react-router-dom";
export default class News extends Component {
  constructor(props){
    super(props)
    this.state = {
        list:[
            {
                id:1,
                title:"新闻标题1"
            },
            {
                id:2,
                title:"新闻标题2"
            },
            {
                id:3,
                title:"新闻标题3"
            },
            {
                id:4,
                title:"新闻标题4"
            }
        ]
    }
  }  
  render() {
    return (
      <div>
        我是新闻组件
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                    <li key={index}> <Link to={`/newsDetail/${item.id}`}>{item.id}---{item.title}</Link></li>
                    )
                    
                })
            }
            
        </ul>
      </div>
    )
  }
}

        </ul>

//newsdetail
import React, { Component } from 'react'

export default class NewsDetail extends Component {
    constructor(props){
        super(props)
        this.state={

        }
    }
    componentDidMount(){
        console.log(this.props,"props")
        console.log(this.props.match.params.id)
    }
  render() {
    return (
      <div>
        我是新闻详情
      </div>
    )
  }
}

实际项目开发，路由模块化

// router.js
import Home from './components/Home';
import User from './components/User';
import Shop from './components/Shop';

import News from './components/News';


let routes = [
  {
    path: "/",
    component: Home,
    exact:true
  },
  {
    path: "/shop",
    component: Shop
  },
  {
    path: "/user",
    component: User
  },
  {
    path: "/news",
    component: News
  }
];
exports default routes

//App.js
import route form " ./router.js"
		{
              routes.map((route,key)=>{
                  if(route.exact){
                    return <Route key={key} exact path={route.path} component={route.component}/>
                  }else{
                    return <Route  key={key}  path={route.path} component={route.component}/>
                  }
              })
            }       

路由嵌套

import Home from '../components/Home'
import News from '../components/News'
import NewsDetail from '../components/NewsDetail'
import Product from '../components/Product'
import ProductDetail from '../components/ProductDetail'
import User from '../components/User'
import UserAdd from '../components/User/UseAdd'
import UseEdit from '../components/User/UseEdit'

let routes = [
    {
      path: "/",
      component: Home,
      exact:true
    },
    {
      path: "/news",
      component: News
    },
    {
       path: "/newsDetail",
       component: NewsDetail
    },
    {
        path: "/product",
        component: Product
      },
      {
         path: "/productDetail",
         component: ProductDetail
      },
    {
      path: "/user",
      component: User,
         //官方规定，不同于Vue children
      routes:[              
          {
            path:"/user/",
            component:UserAdd
          },
          {
            path:"/user/useEdit",
            component:UseEdit
          },

      ]
    }
  ];

export default routes

App.js
		import routes from "./router/route"

        {
              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} />
                    )}
                    />
                  }
              })
            }  
Use.js

import React, { Component } from 'react'
import { Link ,Route } from "react-router-dom";

export default class User extends Component {
    componentDidMount(){
        console.log(this.props.routes,"this.props.routes")  
        // 打印
    }
  render() {
    return (
      <div style={{overflow:"hidden"}}>
          <div style={{float:"left",width:"30%",height:200}}>
                <Link to="/user/">增加用户useAdd</Link>
                    <br />
                    <br />
                <Link to="/user/useEdit">增加用户useEdit</Link>
          </div>
          <div style={{float:"left",width:"30%",height:200}}>
                {
                    this.props.routes.map((route,key)=>{
                        return   <Route key={key} exact path={route.path} component={route.component} />
                    })
                }
                            {/* <Route  path="/user/add" component={UserAdd} /> */}
          </div>
      </div>
    )
  }
}

关键点这 几行代码

     return <Route  key={key}  path={route.path} render={props => (
        		 <route.component {...props} routes={route.routes} />
             )}
             />

js路由跳转

• 1.引入

    import {BrowserRouter as Router,Route,Link,Redirect,withRouter } from"react-router-dom";
    // 不用的可以删除 eslint

• 2.定义一个flag

        this.state = { 
                loginFlag:false            
        };

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

       if(this.state.loginFlag){
            return <Redirect to={{ pathname: "/" }} />;
        }

若有问题，望斧正