react router 4

React Router V4 也走了react的路，咳，一切都成组件。例如Route、Link、Switch等都是组件。
react-router和react-router-dom是react router拆分出来的，平时使用只需要引入react-router-dom，当然，如果搭配redux，你还需要使用react-router-redux。

Router

React Router 4 中，你可以将各种组件及标签放进 <Router>组件中，它用来保持与 location 的同步。tips: <Router>组件下只允许存在一个子元素。可以像以下方式使用：

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  <BrowserRouter>
    <App />  //在app中进行拆分，放网站的导航链接，以及其他的
  </BrowserRouter>
),document.getElementById('main'))

1. <BrowserRouter>：使用 HTML5 提供的 history API（pushState,
   replaceState以及popstate事件） 来保持 UI 和 URL
   的同步，在服务区来管理动态请求时，需要使用<BrowserRouter>组件；
2. <HashRouter>：使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL
   的同步，一般静态页面使用；
3. <MemoryRouter>：能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写)；
4. <NativeRouter>：为使用React Native提供路由支持；
5. <StaticRouter>：从不会改变地址；

<Route>组件有如下属性：

1. path: 路由匹配路径。（没有path属性的Route 总是会 匹配）；
2. exact：为true时，则要求路径与location.pathname必须完全匹配,如 path='/test',你就只能匹配到'/test'；
3. strict：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname，如path='/test/'只匹配 '/test/*'；

<Route>提供了三种渲染内容的方法：

1. <Route component>：在地址匹配的时候React的组件才会被渲染，route props也会随着一起被渲染；
2. <Route render>：当匹配成功后调用该函数。该过程与传入component参数类似,这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便；
3. <Route children>：与render属性的工作方式基本一样，除了它是不管地址匹配与否都会被调用；

tips:<Route component>的优先级要比<Route render>高,通常component参数与render参数被更经常地使用。children参数偶尔会被使用，它更常用在path无法匹配时呈现的'空'状态。

<Switch>

<Switch>会遍历自身的子元素（即路由）并对第一个匹配当前路径的元素进行渲染

import { Switch,Route } from 'react-router'

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

<Link>

当你点击<Link>时，URL会更新，组件会被重新渲染，但是页面不会重新加载。
Link组件属性：

1. to（string/object）：要跳转的路径或地址；
2. 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 />

React Router拥有优质的文档，你可以查看并从中了解更多的信息

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!