React Router笔记 -- 摘自阮一峰大神博客

太过爱你忘了你带给我的痛 2022-06-13 10:54 195阅读 0赞

React-Router是React体系中的路由库，它通过管理URL，实现组件的切换和状态的变化。

# 基本用法 #

Router是一个React组件：

import { Router } from 'react-router';
    render(<Router/>, document.getElementById('app'));

Router组件本身只是一个容器，真正的路由要通过Route组件定义：

import { Router, Route, hashHistory } from 'react-router';
    
    render((
      <Router history={hashHistory}>
        <Route path="/" component={App}/>
      </Router>
    ), document.getElementById('app'));

上面的代码表示，如果用户访问根路由 + “/”，组件（component=\{App\}）APP就会加载到：`document.getElementById('app'))`。

注：  
上面的例子中，Router组件有一个参数history，它的值hashHistory表示，路由的切换由URL的hash变化决定，即URL的\#部分发生变化。举例来说，用户访问[http://www.example.com/][http_www.example.com]，实际会看到的是[http://www.example.com/\#/][http_www.example.com 1]。

另一个稍微复杂的例子：

代码解释：  
用户访问/repos，则加载Repos组件，访问/about，则加载About组件。

# 嵌套路由 #

组件Route可以嵌套。

嵌套的组件表示，用户访问/repos时，会先加载App组件，然后在它的内部再加载Repos组件。

当Router下面的字路由比较多的时候，我们可以写成这样的形式：

let routes = <Route path="/" component={App}>
      <Route path="/repos" component={Repos}/>
      <Route path="/about" component={About}/>
    </Route>;
    
    <Router routes={routes} history={browserHistory}/>

# Route的path属性 #

Route组件的Path指定路由的匹配规则。这个属性可以省略。

并且，path属性可以使用通配符。

规则如下：

1、paramName
        :paramName匹配URL的一个部分，直到遇到下一个/、?、#为止。这个路径参数可以通过this.props.params.paramName取出。
    2、()
        ()表示URL的这个部分是可选的。
    3、*
        *匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。
    4、**
        ** 匹配任意字符，直到下一个/、?、#为止。匹配方式是贪婪模式。

例子：

<Route path="/hello/:name">
    // 匹配 /hello/michael
    // 匹配 /hello/ryan
    
    <Route path="/hello(/:name)">
    // 匹配 /hello
    // 匹配 /hello/michael
    // 匹配 /hello/ryan
    
    <Route path="/files/*.*">
    // 匹配 /files/hello.jpg
    // 匹配 /files/hello.html
    
    <Route path="/files/*">
    // 匹配 /files/ 
    // 匹配 /files/a
    // 匹配 /files/a/b
    
    <Route path="/**/*.jpg">
    // 匹配 /files/hello.jpg
    // 匹配 /files/path/to/file.jpg

path属性也可以使用相对路径，也就是不以 / 开头。这是，匹配的路径就会相对于父组件的路径。

路由匹配是从上到下执行的，一旦发现匹配，就不会继续向下查找其他的规则了。

# IndexRoute组件 #

看这个栗子：

这个栗子存在这样一个问题：如果我们访问路径 / ，不会加载任何子组件。也就是说，App组件的this.props.children是undefined。

IndexRoute就是为了解决这个问题，显式指定 Home 是根路由的子组件，即指定默认情况下加载的子组件。

我们把上面的代码改成：

那么用户访问 / 的时候，得到的组件结构是：

这种组件结构就很清晰了，App只包含下级组件的共有元素，本身的展示内容则由Home组件定义。这样有利于代码分离。

注意，IndexRoute组件没有路径参数path。

# Redirect组件 #

Redirect组件用于路由的跳转，即用户访问一个路由，会自动跳转到另一个路由。

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

现在，如果用户访问/inbox/messages/5，就会自动跳转到/messages/5。

# IndexRedirect组件 #

该组件用于访问根路由的时候，将用户重定向到某个子组件。

<Route path="/" component={App}>
      ＜IndexRedirect to="/welcome" />
      <Route path="welcome" component={Welcome} />
      <Route path="about" component={About} />
    </Route>

上面代码中，如果用户访问根路径，将自动重定向到子组件welcome。

# Link #

Link组件用于取代 a 元素，生成一个连接，允许用户点击后跳转到另一个路由，它基本上就是a元素的React版本，可以接收Router状态。

render() {
      return <div>
        <ul role="nav">
          <li><Link to="/about">About</Link></li>
          <li><Link to="/repos">Repos</Link></li>
        </ul>
      </div>
    }

Link组件有一个activeStyle属性，可以定义当前用户的样式。

<Link to="/about" activeStyle={ { color: 'red'}}>About</Link> <Link to="/repos" activeStyle={ { color: 'red'}}>Repos</Link>

现在，这个链接将会显式红色。

还有一种方式是定义属性activeClassName为这个路由添加class

<Link to="/about" activeClassName="active">About</Link>
    <Link to="/repos" activeClassName="active">Repos</Link>

# IndexLink #

如果想要链接到根路由，需要使用IndexLink组件。

这是因为，对于根路由来说，activeStyle 和 activeClassName 会失效，或者说总是生效，因为 / 会匹配任何子路由。而IndexLink组件会使用路径的精确匹配。

另一种方式是使用Link组件的onlyActiveOnIndex属性：

# history 属性 #

Router组件的history属性，用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供React Router匹配。

history属性可以设置三种值：

browserHistory
    hashHistory
    createMemoryHistory

browserHistory：路由将通过URL的hash部分切换。

browserHistory：路由将采用正常的路径。

createMemoryHistory：用于服务器渲染。

# 表单处理 #

表单和React Router的对接方法：

方法1，使用browserHistory.push

import { browserHistory } from 'react-router'
    
    // ...
      handleSubmit(event) {
        event.preventDefault()
        const userName = event.target.elements[0].value
        const repo = event.target.elements[1].value
        const path = `/repos/${userName}/${repo}`
        browserHistory.push(path)
      },

方法2，使用context对象

export default React.createClass({
    
      // ask for `router` from context
      contextTypes: {
        router: React.PropTypes.object
      },
    
      handleSubmit(event) {
        // ...
        this.context.router.push(path)
      },
    })

# 路由的钩子 #

每个路由都有Enter和Leave钩子，用户进入或者离开该路由的时候会触发。

上面的代码中，如果用户离开/messages/:id，进入/about时，会依次触发以下的钩子。

/messages/:id的onLeave  
/inbox的onLeave  
/about的onEnter

[http_www.example.com]: http://www.example.com/
[http_www.example.com 1]: http://www.example.com/#/