React Router学习笔记

爱被打了一巴掌 2022-09-04 13:48 142阅读 0赞

### 文章目录 ###

*   *  路由配置
     *   *  基本配置
         *  添加首页
         *  嵌套路径的非嵌套路由
         *  兼容其余路由
     *  进入和离开的Hook
     *   *  Histories
         *  browserHistory
         *  hashHistory
         *  createMemoryHistory
         *  IndexRoute与IndexLink
         *   *  IndexRoute默认路由
             *  indexLink

React Router是基于React之上的路由库，一开始在官网没找到对应的API，着实费了一点劲，本文将就React Router的内容做一个简单的总结

## 路由配置 ##

### 基本配置 ###

import React from 'react'
    import {  Router, Route, Link } from 'react-router'
    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)

### 添加首页 ###

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)

### 嵌套路径的非嵌套路由 ###

一些嵌套过深的页面会导致路由的过度嵌套，其实我们拥有对路由的绝对掌控，并非一定要设置为多层嵌套的路由，可以参照下面的例子

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

我们看到，只需要多加一个斜杠，就可以通过绝对路径来设置路由，从而避免层层嵌套的问题

### 兼容其余路由 ###

有一些用户输入的地址可能在设置的路由情况之外，我们可以用Redirect来重定向到对应的位置

import {  Redirect } from 'react-router'
    
    React.render((
      <Router>
        <Route path="/" component={ App}>
          <IndexRoute component={ Dashboard} />
          <Route path="about" component={ About} />
          <Route path="inbox" component={ Inbox}>
            <Route path="/messages/:id" component={ Message} />
    
            { /* 跳转 /inbox/messages/:id 到 /messages/:id */}
            <Redirect from="messages/:id" to="/messages/:id" />
          </Route>
        </Route>
      </Router>
    ), document.body)

## 进入和离开的Hook ##

Route 可以定义 onEnter 和 onLeave 两个 hook ，这些hook会在页面跳转确认时触发一次。这些 hook 对于一些情况非常的有用，例如权限验证或者在路由跳转前将一些数据持久化保存起来。

### Histories ###

React Router 是建立在 history 之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 location 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。Histories可以分为三种，browserHistory, hashHistory, createMemoryHistory

### browserHistory ###

Browser history 是使用 React Router 的应用推荐的 history。它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/some/path这样真实的 URL 。使用需要在服务器端做相应的配置

### hashHistory ###

Hash history 使用 URL 中的 hash（\#）部分去创建形如 example.com/\#/some/path 的路由。（默认）

### createMemoryHistory ###

Memory history 不会在地址栏被操作或读取。这就解释了我们是如何实现服务器渲染的。同时它也非常适合测试和其他的渲染环境（像 React Native ）。

### IndexRoute与IndexLink ###

#### IndexRoute默认路由 ####

默认路由存在的意义就在于，可以用this.props.children在app中调用默认的首页

#### indexLink ####

如果你在这个 app 中使用 Home , 它会一直处于激活状态，因为所有的 URL 的开头都是 / 。因为“子路由被激活的时候，父路由也是被激活的“  
        可以看到IndexLink的作用：只有当该路由而不是其子路由被激活时，改路由才是被激活的。换句话说，IndexLink突破了“子路由被激活时，父路由也是被激活的”的限制。