react-router 与 react-router-dom

react-router 与 react-router-dom

通过路由配置匹配URL来执行对应的代码。

react-router 用法

通过 和 来进行路由的跳转和匹配
例子
在组件中使用this.props.params获取路由传递的参数

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

const App = React.createClass({
     
  render() {
     
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {
     this.props.children}
      </div>
    )
  }
})

const About = React.createClass({
     
  render() {
     
    return <h3>About</h3>
  }
})

const Inbox = React.createClass({
     
  render() {
     
    return (
      <div>
        <h2>Inbox</h2>
        {
     this.props.children || "Welcome to your Inbox"}
      </div>
    )
  }
})

const Message = React.createClass({
     
  render() {
     
    return <h3>Message {
     this.props.params.id}</h3>
  }
})

React.render((
  <Router>
    <Route path="/" component={
     App}>
      <Route path="about" component={
     About} />
      <Route path="inbox" component={
     Inbox}>
        <Route path="messages/:id" component={
     Message} />
      </Route>
    </Route>
  </Router>
), document.body)

使用来设置一个初始页面

const Dashboard = React.createClass({
     
  render() {
     
    return <div>Welcome to the app!</div>
  }
})

React.render((
  <Router>
    <Route path="/" component={
     App}>
      {
     /* 当 url 为/时渲染 Dashboard */}
      <IndexRoute component={
     Dashboard} />
      <Route path="about" component={
     About} />
      <Route path="inbox" component={
     Inbox}>
        <Route path="messages/:id" component={
     Message} />
      </Route>
    </Route>
  </Router>
), document.body)

当访问跟路径“/”时，不要使用Link而使用IndexLink组件，因为对于跟路由而言activeStyle和activeClassName会总是生效，因为“/”匹配所有路由，而IndexLink只有在精确匹配“/”时才会生效，例如/about不会生效。另一种方法是使用onlyActiveOnIndex属性来实现。

<Link to="/" activeClassName="active" onlyActiveOnIndex={
     true}>
  Home
</Link>

Redirect 用来重定向，将from中url跳转到to中的url值

{
     /* 跳转 messages/:id 到 /messages/:id 相对定位转为绝对定位*/}
<Redirect from="messages/:id" to="/messages/:id" />

route钩子函数

route有两个钩子onEnter和onLeave分别在页面进入前和离开前执行。在路由跳转过程中，onLeave 钩子会在所有将离开的路由中触发，从最下层的子路由开始直到最外层父路由结束。然后onEnter hook会从最外层的父路由开始直到最下层子路由结束。

history

Rect Router 自定义三种history

• BrowserHistory
• hashHistory
• createMemoryHistory

BrowserHistory使用浏览器的History API来处理URL，创建的形式就像真的页面跳转一样，像example.com/list/123这样真实的 URL
hashHistory 是使用 URL 中的 hash（#）部分去创建路由，像example.com/#/list/123
使用方法

render(
  <Router history={
     browserHistory}>
    <Route path='/' component={
     App}>
      <IndexRoute component={
     Home} />
      <Route path='about' component={
     About} />
      <Route path='features' component={
     Features} />
    </Route>
  </Router>,
  document.getElementById('app')
)

react-router-dom用法

BrowserRouter 使用浏览器history来处理URL。
属性：
forceRefresh:bool 浏览器不支持html5 history时强制刷新页面
basename:设置uri根目录
getUserConfirmation:func 导航到页面前执行的函数

<BrowserRouter
  basename={
     optionalString}
  forceRefresh={
     optionalBool}
  getUserConfirmation={
     optionalFunc}
  keyLength={
     optionalNumber}
>
  <App/>
</BrowserRouter>

HashRouter 使用URL的哈希部分（即window.location.hash）来处理URL。

<HashRouter>
  <App/>
</HashRouter>

NavLink当匹配到当前url时给已渲染的元素添加参数。
属性：
activeStyle:object 当元素处于活动状态时应用于元素的样式
exact: bool 当为真时，仅当位置匹配完全时才会应用活动类/样式。
strict: bool 当为真时，只有当访问地址后缀斜杠严格匹配时激活样式才会应用。
isActive: func 决定导航是否激活，或者在导航激活时候做点别的事情。

 //activeClassName选中时样式为selected
FAQs
  
 // 选中时样式为activeStyle的样式设置
 FAQs

Switch只渲染第一个匹配的Route 或Redirect组件。

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