React学习笔记——Router(有待完善类比学习、页面路由与服务端路由部分)

React-router

基本概念

import { Router, Route, Link } from 'react-router'

BrowserRouter:容器组件,在其内配置Route为真正的路由方面的东西;
Route:它最基本的职责是在location与路由路径匹配时呈现相应的component;
Link:为应用程序提供声明性的、可访问的导航。(a标签)


基础组件

BrowserRouter
  • basename:string
    为页面的路由提供一个base URL;
   <BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">
  • forceRefresh: bool
    为真时,使页面强制刷新,你可能只想用在那些尚不支持HTML5 History API的的浏览器上
  • to:string/object
    为string时:需要导航到路径,如:
    为object时:同为路径,但可以携带部分内容
 <Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>
  • replace:bool
    当为true时,单击该链接将替换历史堆栈中的当前条目,而不是添加一个新条目。

组件基础上实现的,当我匹配上现在URL的时候会添加上馅饼的样式属性

  • activeClassName:string
    顾名思义
  • activeStyle:object
    顾名思义
 <NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}>
   FAQsNavLink>
  • exact:bool
    完全匹配才会激活相关的样式信息
  • strict:bool
    参考
  • isActive:func
    通过一个函数来决定是否激活相关样式信息
 // only consider an event active if its event id is an odd number
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

"/events/123"
  isActive={oddEvent}>
  Event 123
Route

这可能是在React-Router中最重要的组件了。Route最基本的职责是在location与路由路径匹配时适配合适的component
看看下面的代码大概就会明白:

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  div>
Router>

在访问 / 路径时应该会呈现如下的情况:

<div>
  <Home/>
  
div>

在访问 /news 路径时应该会呈现如下的情况:

<div>
  
  <NewsFeed/>
div>

这里有三种方法可以实现路由,分别是:

它们分别适合于不同的场景,通常情况下你只会用到第一种;但是这三种渲染方法都会传递三个相同的参数

  • match
  • location
  • history
//console.log(this.props)会得到如下的内容
{
match: {…}, 
location: {…}, 
history: {…}, 
...}

参数说明

  • component
    指定用来渲染的component
  • path:string
    路径参数,/user/:id后面的id为变量
  • render:func
    当路径匹配时会执行render内的函数,值得一提的是在设置有component 的情况下component 的优先级更高,所以请不要同时使用component 和 render
  • children:func

  • exact:bool
    为true时,这条路径会进行精确匹配,意味着/user只会在/user匹配而在/user/info就不会匹配

  • strict:bool
    为true时会对‘/‘进行严格匹配,但这对当location.pathname中含有多余的URL片段时并不会有影响。
<Route strict path="/one/" component={About}/>
path location.pathname matches?
/one/ /one no
/one/ /one/ yes
/one/ /one/tow yes
<Route exact strict path="/one" component={About}/>
path location.pathname matches?
/one /one yes
/one /one/ no
/one /one/tow no

- loaction:object
暂空

IndexRoute

默认渲染

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

精确匹配‘/‘

Redirect
  • to:string/obejct
    需要跳转的URL
  • push:bool
    为true时,重定向将会推动一个新的进入history,而不是取代当前的,类比于Link组件的replace属性
  • from:string
"inbox" component={Inbox}>
  {/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
  <Redirect from="messages/:id" to="/messages/:id" />

访问/inbox/messages/5,会跳转到/message/5

路由匹配原理

  • 路由嵌套
<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>

App组件应写成如下,其中this.props.children代表子组件

export default React.createClass({
  render() {
    return <div>
      {this.props.children}
    div>
  }
})
  • 路径语法
    • :paramName
      :paramName匹配URL的一个部分,直到遇到下一个/、?、#为止。这个路径参数可以通过this.props.params.paramName取出。
    • ()
      ()表示URL的这个部分是可选的。
    • *
      *匹配任意字符,直到模式里面的下一个字符为止。匹配方式是非贪婪模式。
    • **
      ** 匹配任意字符,直到下一个/、?、#为止。匹配方式是贪婪模式。
  • 优先级
    最后,路由算法会根据定义的顺序自顶向下匹配路由。因此,当你拥有两个兄弟路由节点配置时,你必须确认前一个路由不会匹配后一个路由中的路径。

类比学习vue-router与koa-router

有待完善

页面路由与服务端路由

有待完善


参考:
- 官方文档
- 阮一峰React Router使用教程
- React-Router中文文档(内容已旧)
- 余博伦react-router 4.0配置

你可能感兴趣的:(React)