React-Router学习

最新推荐文章于 2021-06-16 15:33:03 发布

barnett_y

最新推荐文章于 2021-06-16 15:33:03 发布

阅读量702

点赞数

分类专栏：【React-Router点滴知识】

【React-Router点滴知识】专栏收录该内容

54 篇文章 0 订阅

订阅专栏

一. 嵌套

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} />
  )
}