react-route4使用

• react-router 使用 demo https://github.com/ws199501/react-router4-demo

• router是放置的位置即页面显示的位置！

• path="/" 的页面为进入该页面首先显示的页面！

• 注意BrowserRouter，Route，Switch的顺序.

• BrowserRouter里的内容需要被包在一起。Route不能和之前版本的一样格式去一层一层包裹。

• BrowserRouter 设置了basename，push和replace的时候会在basename后面加push的内容。

• 和 是不一样的，后则以当前basename为根替换掉所有basename之后的内容，前者是替换最后一级内容。

• 例子：

import React, { Component } from 'react'
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {  Route, BrowserRouter, Switch, Link } from 'react-router-dom'

import One from './one'
import Two from './two'

class Car extends Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }


  render() {
    return (
      
        

          

            to="one" 

             to="/two" 
          
          
            
            
          
        
      
    )
  }
}
const mapStateToProps = (state) => {
  return {
  }
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({
    }, dispatch),
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Car)

原来的路由是car/one 我们再后面加个a，basename="car"

路由1

点击第一个按钮 to="one",路由的最后a被替换成了one

点击one

再点击第二个按钮 to="/two"，basename之后的被替换成了two

再点击two

• root 页面
• router4自己自带history

import React, { Component } from 'react';
import { Provider } from 'react-redux'
import { Route, BrowserRouter, Switch } from 'react-router-dom'    //包
import configureStore from './redux/configureStore'

import Main from './containers/main'         //引入页面
import Car from './containers/car'
import Wallet from './containers/wallet'
import User from './containers/user'
const store = configureStore()              //页面store

export default class App extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    //写router
      return (
        
          
            
              
              
              
              
            
          
        
      )
  }
}

• main 页面
• router4自己自带history
• push 和 replace 区别，新增 和 替代 当前页面
• 这里的push直接会改变router并且刷新页面。

import React, {Component} from 'react';
import { BrowserRouter } from 'react-router-dom'

export default class Main extends Component {
  render() {
    return (
      
        

          

               this.props.history.push('/car')}>car
              

               this.props.history.push('/wallet')}>wallet
              

               this.props.history.push('/user')}>User
              

          
        
      
    )
  }
}

• 这里的push直接会改变router但是不会刷新页面！
• 想要刷新页面做法可以是： history.go()！个人觉得很方便。（其他方式网上一般都是安装其他依赖去解决。）

this.props.history.push('/car')
this.props.history.go()

• user页面

import React, {Component} from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom'

import BindPhone from './bindPhone'

import './style.less'

export default class Wallet extends Component {
  render() {
    return (
      
        

          
我在写router前
          
            
          
        
      
    )
  }
}