React Router4.0

React Router v4是对React Router的一次彻底重构，采用动态路由，遵循React中一切皆组件的思想，每一个Route(路由)都是一个普通的React组件。BrowserRouter创建的URL形式如下：http://react.com/some/pathHashRouter创建的URL形式如下：http://react.com/#/some/path使用BrowserRouter时，一般还需要对服务器进行配置，让服务器能正确处理所有可能的URL.例如，当浏览器发送 http://react.com/some/path 和 http://react.com/some/path2两…，服务器能够返回正确的HTML页面（也就是单页面应用中唯一的html页面).使用HashRouter则不存在这个问题，因为hash部分的内容会被服务器自动忽略，真正有效的是hash前面的部分，而对于单页面应用来说，这部分内容是固定的。路由的配置1.path(1)当使用BrowserRouter时，path用来描述这个Route匹配的URL的pathname(2)当使用HashRouter时,path用来描述这个Route匹配的URL的hash.2.match(1)params: Route的path可以包含参数，例如：<Route path=’/foo/:id’> 包含一个参数id。params就是用于从匹配的URL中解析出path中的参数，例如：当URL=“http://react.com/foo/1时，params={id:1}。(2)isExact: 是一个布尔值，当URL完全匹配时，值为true;当URL部分匹配时，值为false.例如：当path="/foo”，URL=“http://react.com/foo"时，是完全匹配；当URL=“http://react.com/foo/1时，是部分匹配。(3)path: Route的path属性，构建嵌套路由时会使用到。(4)url: URL的匹配部分。3.Route渲染组件的方式(1)componentcomponent的值是一个组件，当URL和Route匹配时，component属性定义的组件就会被渲染。<Route path=’/foo’ component={FOO}>当URL=“http://react.com/foo"时，Foo组件会被渲染。(2)renderrender的值是一个函数，这个函数返回一个React元素，这个函数返回一个React元素。这种方式可以很方便的为待渲染的组件传递额外的属性。例如：<Route path=’/foo’ render={(props)=>(<Foo {…props} data={extraProps} />)}>Foo组件接收了一个额外的data属性。(3)children children的值也是一个函数，函数返回要渲染的React元素。与之前两种方式不同的是，无论是否匹配成功，children返回的组件都将会被渲染。但是当匹配不成功时，match属性为null。例如：<Route path=’/foo’ children={(props)=>(<div className={props.match?‘active’:’’}> <Foo /></div>)} />如果Route匹配当前URL,待渲染元素的根节点div的class将被设置成active。4.Switch和exact当URL和多个Route匹配时，这些Route都会执行渲染操作。如果只想让第一个匹配的Router渲染，那么可以把这些Route包到一个Switch组件中。如果想让URL和Route完全匹配时，Route才渲染，那么可以使用Route的exact属性。Switch和exact常常联合使用，用于应用首页的导航。例如：<Router><Switch> <Route exact path=’/’ component={Home} /> <Route path=’/posts’ component={Posts} /> <Route path=’/:user’ component={User} /></Switch></Router>如果不使用Switch，当URL的pathname为”/posts"时，<Route path=’/posts’/>和<Route path=’/:user’ />都会被匹配。如果不使用exact,”/” “/posts” “/user1"等几乎所有URL都会匹配第一个Route，又因为Switch的存在，后面的两个Route永远也不会被匹配。使用exact,保证只有当URL的pathname为”/“时，第一个Route才会被匹配。5.嵌套路由嵌套路由是指在Route渲染的组件内部定义新的Route.例如：const Posts = ({match}) => {return( <div> {/这里match.url等于／posts/} <Route path={${match.url}/:id} component={PostDetail} /> <Route exact path={match.url} component={PostList} /> </div>)}当URL的pathname为”/posts/react"时，PostDetail组件会被渲染；当URL的pathname为"/posts"时，PostList组件会被渲染。Route的嵌套使用让应用可以更加灵活的使用路由。6.链接Link是React Router提供的链接组件，一个Link组件定义了当点击该Link时，页面应该如何路由：例如：const Navigation = () => (<header> <nav> <ul> <li><Link to=’/’>Home</Link></li> <li><Link to=’/posts’>Posts</Link></li> </ul> </nav></header>)Link使用to属性声明要导航到URL地址。to可以是string或object类型，当to为object类型时，可以包含pathname、search、hash、state、四个属性，例如：<Link to={{pathname:’/posts’,search:’?sort=name’,hash:’#the-hash",state:{formHome:true}}}/>除了使用Link外，我们还可以使用history对象手动实现导航，history中最常用的方法是push(path,[state])和replace(path,[state]),push会向浏览器历史记录中新增一条记录，replace会用新纪录替换当前纪录，例如：history.push(’/posts’)history.replace(’/posts’)import React from “react”;import { BrowserRouter as Router, Route, Link } from “react-router-dom”;function BasicExample() { return (<Router> <div> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/topics">Topics</Link> </li> </ul> <hr /> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/topics" component={Topics} /> </div></Router>);}function Home() { return (<div> <h2>Home</h2></div>);}function About() { return (<div> <h2>About</h2></div>);}function Topics({ match }) { return (<div> <h2>Topics</h2> <ul> <li> <Link to={${match.url}/rendering}>Rendering with React</Link> </li> <li> <Link to={${match.url}/components}>Components</Link> </li> <li> <Link to={${match.url}/props-v-state}>Props v. State</Link> </li> </ul> <Route path={${match.path}/:topicId} component={Topic} /> <Route exact path={match.path} render={() => <h3>Please select a topic.</h3>} /></div>);}function Topic({ match }) { return (<div> <h3>{match.params.topicId}</h3></div>);}export default BasicExample;