React学习笔记——Router（有待完善类比学习、页面路由与服务端路由部分）

React-router

基本概念

import { Router, Route, Link } from 'react-router'

BrowserRouter：容器组件，在其内配置Route为真正的路由方面的东西；
Route：它最基本的职责是在location与路由路径匹配时呈现相应的component；
Link：为应用程序提供声明性的、可访问的导航。(a标签)

---

基础组件

BrowserRouter

• basename:string
  为页面的路由提供一个base URL；

   <BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">

• forceRefresh: bool
  为真时，使页面强制刷新，你可能只想用在那些尚不支持HTML5 History API的的浏览器上

Link

• to:string/object
  为string时：需要导航到路径，如：<Link to="/courses"/>
  为object时：同为路径，但可以携带部分内容

 <Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

• replace:bool
  当为true时，单击该链接将替换历史堆栈中的当前条目，而不是添加一个新条目。

NavLink

<Link> 组件基础上实现的，当我匹配上现在URL的时候会添加上馅饼的样式属性

• activeClassName:string
  顾名思义
• activeStyle:object
  顾名思义

 <NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}>
   FAQs</NavLink>

• exact:bool
  完全匹配才会激活相关的样式信息
• strict:bool
  参考<Route Strict>
• isActive:func
  通过一个函数来决定是否激活相关样式信息

 // only consider an event active if its event id is an odd number
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

这可能是在React-Router中最重要的组件了。Route最基本的职责是在location与路由路径匹配时适配合适的component
看看下面的代码大概就会明白：

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

在访问 / 路径时应该会呈现如下的情况：

<div>
  <Home/>
  <!-- react-empty: 2 -->
</div>

在访问 /news 路径时应该会呈现如下的情况：

<div>
  <!-- react-empty: 1 -->
  <NewsFeed/>
</div>

这里有三种方法可以实现路由，分别是：

• <Route component>
• <Route render>
• <Route children>

它们分别适合于不同的场景，通常情况下你只会用到第一种；但是这三种渲染方法都会传递三个相同的参数

• match
• location
• history

//console.log(this.props)会得到如下的内容
{
match: {…}, 
location: {…}, 
history: {…}, 
...}

参数说明

• component
  指定用来渲染的component
• path:string
  路径参数，/user/:id后面的id为变量
• render:func
  当路径匹配时会执行render内的函数，值得一提的是在设置有component 的情况下component 的优先级更高，所以请不要同时使用component 和 render

• children:func

• exact:bool
  为true时，这条路径会进行精确匹配，意味着／user只会在/user匹配而在/user/info就不会匹配

• strict:bool
  为true时会对‘／‘进行严格匹配，但这对当location.pathname中含有多余的URL片段时并不会有影响。

<Route strict path="/one/" component={About}/>

path	location.pathname	matches?
/one/	/one	no
/one/	/one/	yes
/one/	/one/tow	yes

<Route exact strict path="/one" component={About}/>

path	location.pathname	matches?
/one	/one	yes
/one	/one/	no
/one	/one/tow	no

- loaction:object
暂空

IndexRoute

默认渲染

<Router>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  </Route>
</Router>

IndexLink

精确匹配‘／‘

Redirect

• to:string/obejct
  需要跳转的URL
• push:bool
  为true时，重定向将会推动一个新的进入history，而不是取代当前的，类比于Link组件的replace属性
• from:string

<Route path="inbox" component={Inbox}>
  {/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
  ＜Redirect from="messages/:id" to="/messages/:id" />
</Route>

访问/inbox/messages/5，会跳转到/message/5

路由匹配原理

• 路由嵌套

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>

访问／repos会先加载App组件，然后在它内部再加载Repos组件。

<App>
  <Repos/>
</App>

App组件应写成如下，其中this.props.children代表子组件

export default React.createClass({
  render() {
    return <div>
      {this.props.children}
    </div>
  }
})

• 路径语法
  
  • :paramName
    :paramName匹配URL的一个部分，直到遇到下一个/、?、#为止。这个路径参数可以通过this.props.params.paramName取出。<Route path="/hello/:name">
  • ()
    ()表示URL的这个部分是可选的。<Route path="/hello(/:name)">
  • *
    *匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。<Route path="/files/*.*">
  • **
    ** 匹配任意字符，直到下一个/、?、#为止。匹配方式是贪婪模式。
• 优先级
  最后，路由算法会根据定义的顺序自顶向下匹配路由。因此，当你拥有两个兄弟路由节点配置时，你必须确认前一个路由不会匹配后一个路由中的路径。

类比学习vue-router与koa-router

有待完善

页面路由与服务端路由

有待完善

---

参考：
- 官方文档
- 阮一峰React Router使用教程
- React-Router中文文档（内容已旧）
- 余博伦react-router 4.0配置