基础

1. React-router4是全新的版本，和之前版本不兼容，浏览器和React Native均兼容
2. React开发单页应用必备，践行 路由即组件 概念
3. 核心概念
   • 动态路由
   • Route
   • Link
   • Switch
4. 在React大环境下，实现了 Learn once, write everywhere

简单使用

1. 安装
   npm install react-router-dom --save
2. 入门组件
   • BrowserRouter 包裹整个应用
   • Router 路由对应渲染的组件，可嵌套
   • Link 跳转专用
3. 简单使用

import React from 'react';
import ReactDom from 'react-dom';
//增加applyMiddleware模块
import {createStore, applyMiddleware, compose} from 'redux';
//引入thunk
import thunk from 'redux-thunk';
//引入Provider组件
import {Provider} from 'react-redux';
import {counter} from './index.redux';
import App from './App';
//Route 使用 引用组件
import {
    BrowserRouter,  //包裹整个应用
    Route,  //对应渲染的组件
    Link    //挑战
} from 'react-router-dom';
//创建store
const store = createStore(counter, compose(
    applyMiddleware(thunk),//创建异步Redux
    //引入Chrome中的Redux开发者工具
    //修改代码判断系统是否存在函数，若没有则返回空
    window.devToolsExtension ? window.devToolsExtension() : f => f
));

//最外层使用Provide组件，属性只传store,内部App组件内不需要任何属性

function Make() {
    return <h2>赚钱</h2>
}

function Spend() {
    return <h2>花钱</h2>
}

ReactDom.render(
    (<Provider store={store}>
        <BrowserRouter>
            <div>
                <ul>
                    <li>
                        <Link to='/'>首页</Link>
                    </li>
                    <li>
                        <Link to='/make'>赚钱</Link>
                    </li>
                    <li>
                        <Link to='/spend'>花钱</Link>
                    </li>
                </ul>
                {/* exact 表明完全匹配 */}
                <Route path='/' exact component={App}/>
                <Route path='/make' component={Make}/>
                <Route path='/spend' component={Spend}/>
            </div>
        </BrowserRouter>
    </Provider>),
    document.getElementById('root')
);

进阶使用

1. url参数
2. Redirect 跳转组件
3. Switch只渲染一个子Route组件

import React,{Component} from 'react';
import ReactDom from 'react-dom';
//增加applyMiddleware模块
import {createStore, applyMiddleware, compose} from 'redux';
//引入thunk
import thunk from 'redux-thunk';
//引入Provider组件
import {Provider} from 'react-redux';
import {counter} from './index.redux';
import App from './App';
//Route 使用 引用组件
import {
    BrowserRouter,  //包裹整个应用
    Route,  //对应渲染的组件
    Link,    //切换
    Redirect,  //跳转
    Switch
} from 'react-router-dom';
//创建store
const store = createStore(counter, compose(
    applyMiddleware(thunk),//创建异步Redux
    //引入Chrome中的Redux开发者工具
    //修改代码判断系统是否存在函数，若没有则返回空
    window.devToolsExtension ? window.devToolsExtension() : f => f
));

//最外层使用Provide组件，属性只传store,内部App组件内不需要任何属性

function Make() {
    return <h2>赚钱</h2>
}

function Spend() {
    return <h2>花钱</h2>
}
class Test extends Component{
    constructor(props){
        super(props);
    }
    render(){
        console.log(this.props);
        //可以单独做一个报错信息页面比如404
        return <h2>测试 {this.props.match.params.location}</h2>
    }
}
ReactDom.render(
    (<Provider store={store}>
        <BrowserRouter>
            <div>
                <ul>
                    <li>
                        <Link to='/'>首页</Link>
                    </li>
                    <li>
                        <Link to='/make'>赚钱</Link>
                    </li>
                    <li>
                        <Link to='/spend'>花钱</Link>
                    </li>
                </ul>
                <Switch>
                    {/*只渲染第一个命中的Route*/}
                    {/* exact 表明完全匹配 */}
                    <Route path='/' exact component={App}/>
                    <Route path='/make' exact component={Make}/>
                    <Route path='/spend' exact component={Spend}/>
                    <Route path='/:location' component={Test}/>
                    {/* 刷新页面之后默认进入的页面 */}
                    {/*<Redirect to='/'/>*/}
                </Switch>
            </div>
        </BrowserRouter>
    </Provider>),
    document.getElementById('root')
);

Redux 和 Route 配合使用