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

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

基本用法

Router是一个React组件:

import { Router } from 'react-router';
render(, 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/#/。

另一个稍微复杂的例子:

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

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

嵌套路由

组件Route可以嵌套。

<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>

当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、**
    ** 匹配任意字符,直到下一个/、?、#为止。匹配方式是贪婪模式。

例子:


"/hello/:name">
// 匹配 /hello/michael
// 匹配 /hello/ryan

"/hello(/:name)">
// 匹配 /hello
// 匹配 /hello/michael
// 匹配 /hello/ryan

"/files/*.*">
// 匹配 /files/hello.jpg
// 匹配 /files/hello.html

"/files/*">
// 匹配 /files/ 
// 匹配 /files/a
// 匹配 /files/a/b

"/**/*.jpg">
// 匹配 /files/hello.jpg
// 匹配 /files/path/to/file.jpg

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

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

IndexRoute组件

看这个栗子:

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

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

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

我们把上面的代码改成:

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

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

<App>
  <Home/>
App>

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

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

Redirect组件

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

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

现在,如果用户访问/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">AboutLink>li>
      <li><Link to="/repos">ReposLink>li>
    ul>
  div>
}

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

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

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

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

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

IndexLink

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

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

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

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

history 属性

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

history属性可以设置三种值:

browserHistory
hashHistory
createMemoryHistory

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

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

createMemoryHistory:用于服务器渲染。

表单处理

表单和React Router的对接方法:

<form onSubmit={this.handleSubmit}>
  <input type="text" placeholder="userName"/>
  <input type="text" placeholder="repo"/>
  <button type="submit">Gobutton>
form>

方法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钩子,用户进入或者离开该路由的时候会触发。

<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
  <Redirect from="messages/:id" to="/messages/:id" />
Route>

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

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

你可能感兴趣的:(前端开发,React-Rout)