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} />
										)}
									/>
								)
							}
						})
					}