<Router> <div> <Route exact path="https://www.jb51.net/" component={Home}/> <Route path="/news" component={NewsFeed}/> </div> </Router> // 如果应用的地址是/,那么相应的UI会类似这个样子： <div> <Home/> </div> // 如果应用的地址是/news,那么相应的UI就会成为这个样子： <div> <NewsFeed/> </div>
<Route> 组件有如下属性：
path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）；
exact（bool）：为true时，则要求路径与location.pathname必须完全匹配；
strict（bool）：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname；
再次奉上两个鲜活的例子：
exact配置：
路径
location.pathname
exact
是否匹配
/one
/one/two
true
否
/one
/one/two
false
是
strict配置：
路径
location.pathname
strict
是否匹配
/one/
/one
true
否
/one/
/one/
true
是
/one/
/one/two
true
是
同时，新版的路由为 <Route> 提供了三种渲染内容的方法：
<Route component> ：在地址匹配的时候React的组件才会被渲染，route props也会随着一起被渲染；
<Route render> ：这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便；
<Route children> ：与render属性的工作方式基本一样，除了它是不管地址匹配与否都会被调用；
第一种方式没啥可说的，和之前一样，这里我们重点看下 <Route render> 的渲染方式：
// 行内渲染示例 <Route path="/home" render={() => <div>Home</div>}/> // 包装/合成 const FadingRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( <FadeIn> <Component {...props}/> </FadeIn> )}/> ) <FadingRoute path="/cool" component={Something}/>
TIPS: 第三坑！ <Route component> 的优先级要比 <Route render> 高，所以不要在同一个 <Route> 中同时使用这两个属性。
和之前版本没太大区别，重点看下组件属性：
to（string/object）：要跳转的路径或地址；
replace（bool）： 为 true 时 ，点击链接后将使用新地址替换掉访问历史记录里面的原地址； 为 false 时 ，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。 默认为 false ；
示例如下：
// Link组件示例 // to为string <Link to="/about">关于</Link> // to为obj <Link to={{ pathname: '/courses', search: '?sort=name', hash: '#the-hash', state: { fromDashboard: true } }}/> // replace <Link to="/courses" replace />
<NavLink> 是 <Link> 的一个特定版本, 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数，组件属性：
activeClassName（string）：设置选中样式，默认值为 active；
activeStyle（object）：当元素被选中时, 为此元素添加样式；
exact（bool）：为 true 时, 只有当地址完全匹配 class 和 style 才会应用；
strict（bool）：为 true 时，在确定位置是否与当前 URL 匹配时，将考虑位置 pathname 后的斜线； isActive（func）：判断链接是否激活的额外逻辑的功能；
从这里我们也可以看出，新版本的路由在组件化上面确实下了不少功夫，来看看NavLink的使用示例：
// activeClassName选中时样式为selected <NavLink to="/faq" activeClassName="selected" >FAQs</NavLink> // 选中时样式为activeStyle的样式设置 <NavLink to="/faq" activeStyle={{ fontWeight: 'bold', color: 'red' }} >FAQs</NavLink> // 当event id为奇数的时候，激活链接 const oddEvent = (match, location) => { if (!match) { return false } const eventID = parseInt(match.params.eventID) return !isNaN(eventID) && eventID % 2 === 1 } <NavLink to="/events/123" isActive={oddEvent} >Event 123</NavLink>
该组件用来渲染匹配地址的第一个 <Route> 或者 <Redirect> 。那么它与使用一堆route又有什么区别呢？
<Switch> 的独特之处是独它仅仅渲染一个路由。相反地，每一个包含匹配地址(location)的 <Route> 都会被渲染。思考下面的代码：
<Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/>