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的内容。

• <Link to="route"> 和 <Link to="/route"> 是不一样的，后则以当前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 (
      <BrowserRouter basename="/car">
        <div>
          <div>
            <Link to="one">to="one" </Link><br />
            <Link to="/two"> to="/two" </Link>
          </div>
          <Switch>
            <Route path="/one" component={One}/>
            <Route path="/two" component={Two}/>
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}
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 (
        <Provider store={store}>
          <BrowserRouter>
            <Switch>
              <Route exact path="/" component={Main}/>
              <Route path="/wallet" component={Wallet}/>
              <Route path="/car" component={Car}/>
              <Route path="/user" component={User}/>
            </Switch>
          </BrowserRouter>
        </Provider>
      )
  }
}

• 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 (
      <BrowserRouter>
        <div className="root">
          <div>
              <button onClick={() => this.props.history.push('/car')}>car</button>
              <br/>
              <button onClick={() => this.props.history.push('/wallet')}>wallet</button>
              <br/>
              <button onClick={() => this.props.history.push('/user')}>User</button>
              <br/>
          </div>
        </div>
      </BrowserRouter>
    )
  }
}

• 这里的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 (
      <BrowserRouter>
        <div>
          <div style={{textAlign:'center'}}>我在写router前</div>
          <Switch>
            <Route exact path="/user" component={BindPhone}/>
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}