【Day16】React Router

一页式网站 SPA

SPA 全名 Single Page Applications
只有一个 HTML 档，其他都是框架编译出来的
更改路径时实际上是改变页面中不一样的地方，
即藉由 url 切换 component，
有别於传统的多页式网站（MPA，Multi-Page Applications）
使用上与应用程序更加相近。

React Router

由於 React 本身主要是
用以实作使用者介面的 library
如果需要处理 url 切换页面等路由行为
大多会搭配 React 官方开发的 React Router。

React Router 与 React Router DOM

• React Router：实现路由的核心功能
• React Router DOM
  • 基於 React Router 实现在浏览器运行环境下的许多功能，如Link、BrowserRouter、HashRouter、StaticRouter等
  • 安装 react-router-dom 时会自动一并安装 react-router
  • 藉由操作 DOM 来改变 path

在实际操作中会搭配两者使用，
以下介绍一些常见方法。

BrowserRouter 与 HashRouter

• BrowserRouter
  • 使用 pushState 和 popState 事件搭建路由
  • 切换 url 时会发送 request
• HashRouter
  • 使用 window.location.hash 和 hashchange 事件搭建路由
  • 页面路径最前面会有个「#」，切换 url 时不发送 request

Route

设定彼此对应的路径和元件

<Route path="路径" component={ 用来当页面的元件名称(不是标签) } />

• path：指定路径
• component：要切换的 component
• exact：侦测路径完全符合才会显示该页面（预设为部分符合就会跳转）

404 页面

假如 Route 没有写 path 或是path='*'， 并且排在前面的Route都没被吻合的话就会被渲染，可以拿来制作预设页面（404 not found）

<Route path="*">
    <NoMatch404 />
</Route>

path

path 除了既定网址外也可接受参数
写法为 :参数名称
<Route path="/:id" component={SecondPage}/>

参数也能设定为可选，
即使没给参数，
还是可以导向相同页面
<Route path="/:id?" component={SecondPage}/>

绑定元件的props

<Route path="/second" render={()=>{return( <SecondPage id={5}/> )}}/>

原本绑component的方式是透过React.creactElement的方式创造元件。而这种绑render的方式等同於你在Route的props中制造并呼叫一个「渲染的元件的function」

从 component 取得路由资料

• match：
• location：
• history：提供各种操作路由的函式

Route 会将和你要求相符的参数整理成一个叫 match 物件，并放在该页面 component 的 props 中。读取该路径参数的方法为 props.match.params.id

Link 与 <a>

实际渲染时 <Link> 会转成<a>，
并根据前端路由导向正确 href。
<a>的根路径则无法根据前端 router 去更动，
而 Link 可以。

to 可以接受字串或是物件（location object）

字串

<link to="http://test.com" />

物件

<Link to{{
  pathname: '/product',
  search: '?sort=asc',
  hash: '#hash',
  state: { isMemeber: true }
}} />

NavLink

透过activeClassName="active" ，来设定与当前URL吻合时的项目要套用active样式 ，可以想成是进阶版的link

<NavLink activeClassName="active" to="/b">b page</NavLink>

Switch

让第一个吻合url的component被渲染，如果没有switch，所有吻合的component都会被渲染
Switch会把前面所提像是location这些传给route元件的props传给Layout，我们就能在Layout元件中根据不同路由参数呈现不同功能/样貌

Redirect

用来重新导向，不会改变原有的网址

<Redirect to="/intro" />

IndexRoute

又被称作默认路由，
适合用在建立巢状路由。

如下范例所示，IndexRoute 组件没有 path 属性，
而是只有当其父路由的所有其他子路由
（IndexRoute 的所有兄弟路由）都没有激活时，
才会成为父路由的 this.props.children 并显示出来。

import { Router, Route, hashHistory, IndexRoute } from 'react-router'
import Home from './modules/Home'
// ...
render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="/boys" component={Boys}>
          <Route path="/boys/:boyName" component={Boy}/>
      </Route>
      <Route path="/girls" component={Girls}/>
    </Route>
  </Router>
), document.getElementById('app'))

Index Links

如果使用 <Link to="/">Home</Link>
这个连结会始终处於激活状态，
因为所有 URL 的开头都是 /。

如果需要 Home 路由被渲染後才激活，
指向 / 连结，可使用 <IndexLink>。

<IndexLink to="/">Home</IndexLink>

Histories

react router 的 History 方法主要有三种：

• browserHistory
• hashHistory
• createMemoryHistory

browserHistory

主要推荐的 history 方法，
使用浏览器的 History API 来处理 URL，
最接近一般使用者习惯的 router。

hashHistory

使用 URL 中的 hash（#）来创建路由，
网址会类似於 example.com/#/some/path。

不需要任何服务器相关配置就可以使用，
适合刚入门的初学者，
但不推荐在实际网站中使用这种方式。

createMemoryHistory

Memory History 无法在网址栏被操作或读取，
适合用於测试或其他
如 React Native 的渲染环境。

与其他两种 history 最大区别在於，
Memory History 会维护自己的 location，
并依赖浏览器来储存 location 阵列。

参考资料

• 【React.js入门 - 27】 我要更多更多的分页 - react-router-dom
• [Day 24] React Router- 指路者
• react-router与react-router-dom有什么不同？
• React Router有子路由使用IndexRoute设定首页
• 默认路由（IndexRoute）与 IndexLink - React Router 中文文档
• Histories - React Router 中文文档