react router 4.x

学习React，必需要学习React router

目前 2.x和4.x均可以用,我在项目中直接安装，默认是4.x版本，而后就踩一下。

4.x和2.x的区别（3.x和2.x没有区别,但2.x还在维护）

• 4.x路由再也不是集中式的，路由规则存在于布局和组件之间。
• 4.x的路由再也不须要嵌套来实现布局结构和页面（组件）嵌套。
• 4.x没有 props.children 来渲染组件。在4.x中<Route />组件在哪里写，组件就在哪里渲染。
• 4.x中路由规则是包容性的，也就是多个<Route />能够同时匹配和渲染。

下面是代码示例，（我写在 create-react-app脚手架中）

import React, { Component }  from 'react';

import { BrowserRouter,Route,Link,Switch} from 'react-router-dom'


class About extends Component {
    render(){
        return (
        <h1>About</h1>
        )
    }
}

class Inbox extends Component {
    render(){
        return (
        <h1>Inbox</h1>
        )
    }
}

class Home extends Component {
    render (){
        return (
        <h1>Home</h1>
        )
    }
}

const App = () => (
    <BrowserRouter>
        <div>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route  path="/about" component={About} />
                <Route  path="/inbox" component={Inbox} />
                                <Redirect  to="/"  />
            </Switch>
        
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/inbox">Inbox</Link></li>
                <li><Link to="/about"> about</Link></li>
            </ul>
        </div>
    </BrowserRouter>
)
export default App;

1.BrowserRouter 表示history模式, HashRouter 表示哈希模式，这个跟其余路由同样，而且是做为路由的最大容器。
2.在4.x中，全部 路由组件都必须写在上边提到的这两个组件中。
3.在路由容器中，只能并列存在一个元素或组件。
4.<Switch />表示排他性路由，就是说 当前<Switch />下只有一个能匹配并渲染，这时候要注意 里边<Route />的书写顺序。
5.exact参数表示非包容性匹配，能够直接理解为严格匹配或彻底匹配（我本身的理解，可能不对，欢迎讨论），反正这里若是没有exact参数 ，就只渲染 <Home />（由于仍是包容性匹配，加上<Switch />和书写顺序的做用，就永远只显示<Home />组件）,若是<Switch />也没有的话，就是包容性匹配，好比 /about 会渲染 <Home>和 <About>两个组件。
6.鉴于上一条，推荐最后引入根路由匹配。
7.<Switch /> 搭配 <Redirect /> 能够重定向， <Redirect / >必定放到最后。
8.路由模块化，须要结合 map循环，嵌套，须要把子路由向下传递，传递时用render属性。代码以下

{
                        routes.map((value,key) =>{
                            if(value.exact){
                                return (
                                    
                                    <Route  key={key} exact path={value.path}  
                                            render={props=>( <value.component  {...props}  routes={value.routes} />) }
                                    />
                                )
                            }else{
                                return (
                                    <Route  key={key}  path={value.path}
                                        render={props=>(
                                            <value.component {...props} routes={value.routes} />
                                        )}
                                    />
                                )
                            }
                        })
                    }