React-Router学习

一. 嵌套

https://zhuanlan.zhihu.com/p/20381597?columnSlug=purerender
http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu
http://www.mrfront.com/2016/12/11/react-router-tutorial-part1/
http://www.mrfront.com/2016/12/23/react-router-tutorial-part2/
http://www.mrfront.com/2016/12/30/react-router-tutorial-part3/

一. 嵌套

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

实际会加载为

<App>  <Repos/></App>

二. 通配符

2.1 例子

<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

2.2 参数

• :paramName
• ()
• *
• **

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

2.3 相对路径

不以/开头，匹配相对父组件的路径开始，如果不想这样，可以使用绝对路径

带参数路由一定写在底部，否则不会触发后面的规则

<Router>  <Route path="/:userName/:id" component={UserPage}/>  <Route path="/about/me" component={About}/></Router>

2.4 URL参数

比如字符串/foo?bar=baz
可以通过this.props.location.query.bar查询

三. IndexRoute

默认加载的子组件

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

访问/时，结构

<App>  <Home/></App>

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

取代<a>生成链接，用户点击后跳转到另一个路由，可以接收Router状态

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

activeStyle属性指定选中路由样式

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

也可使用activeClassName

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

在Router组件之外，可以使用history api，导航到路由页面

import { browserHistory } from 'react-router';browserHistory.push('/some/path');

七. IndexLink

链接到根/，不使用Link，而要使用IndexLink
对于根路由，activeStyle和activeClassName会失效，因为/会匹配任何路由；
IndexLink会使用路径的精确匹配

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

代码中，根路由只有精确匹配时，才具有activeClassName
另外，使用Link组件的onlyActiveOnIndex属性，也可以达到效果

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

实际上，IndexLink就是对Link组件的onlyActiveOnIndex属性的包装

八. histroy

用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供React Router匹配，history属性可以设置三个值

• browserHistory
• hashHistory
• createMemoryHistory

如果设置为browserHistory，背后调用的是浏览器的History api

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

需要注意的是，browserHistory服务器需要进行配置！

九. 表单处理

Link组件有时需要处理表单跳转、点击按钮跳转，如何和React Router对接呢

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

方法一：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)  },

方法二：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

例子使用onEnter钩子替代<Redirect>组件

<Route path="inbox" component={Inbox}>  <Route    path="messages/:id"    onEnter={      ({params}, replace) => replace(`/messages/${params.id}`)    }  /></Route>

onEnter钩子做认证

const requireAuth = (nextState, replace) => {    if (!auth.isAdmin()) {        // Redirect to Home page if not an Admin        replace({ pathname: '/' })    }}export const AdminRoutes = () => {  return (     <Route path="/admin" component={Admin} onEnter={requireAuth} />  )}

作者：zhangsean
链接：http://www.jianshu.com/p/92820ed2cffb
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。