react学习系列2 使用react-router v4

1. 问：react-router，react-router-native 和 react-router-dom 的区别
   答：react-router是核心。react-router-native 和 react-router-dom是在 react-router 的基础上针对不同运行环境做为额外补充。对于web环境使用 react-router-dom。对于开发 react-native，使用 react-router-native 即可。

2. 官方的例子及代码
   web
   native

3. 例子：手动跳转

路由文件 routerMap

import React from 'react'
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
import Home from '../Pages/Home/'
import List from '../Pages/List/'
import Detail from '../Pages/Detail/'
import NoMatch from './404'

//  下面几行是老式写法，可以忽略
// import createBrowserHistory from 'history/createBrowserHistory';
// 是个用于浏览器导航#的历史对象
// const history = createBrowserHistory()
//  其实就是

export class RouterMap extends React.Component {
  render() {
    return (
      
        

          

            
Home
            
List
          
          

          
            
            
            
            
          
        
      
    );
  }
}

入口文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {RouterMap} from "./Router/routerMap";

ReactDOM.render(

  
  
, document.getElementById('root'));

List页面

import React from 'react'

export default class List extends React.Component {
  constructor({ match }) {
    super();
    this.state = {
      match
    }
  }

  clickHandle(item) {
    //关于history
    // http://www.jianshu.com/p/e3adc9b5f75c
    this.props.history.push('/detail/' + item)
  }

  render() {
    const arr = [1,2,3]
    console.log(this.state.match)
    return (
      

        
List Page
        

          {
            arr.map((item, index) =>
              
{item}
            )
          }
        
      
    )
  }
}

Detail 页面

import React from 'react'

export default class Detail extends React.Component {
  constructor({ match }) {
    super();
    this.state = {
      match
    }
  }

  render() {
    console.log(this.state.match)
    return (
      
Detail Page {this.state.match.params.id}
    )
  }
}

参考：http://www.jianshu.com/p/e3adc9b5f75c