React-Router

Tags
frontendreact
Created
Nov 25, 2015 9:19 AM

V5 Hooks: https://css-tricks.com/the-hooks-of-react-router/

  • useHistory
  • useLocation
  • useParams
  • useRouteMatch

v4+:https://juejin.im/post/5995a2506fb9a0249975a1a4

分三个包:

  • react-router:只提供核心的路由和函数。一般的应用不会直接使用;
  • react-router-dom:供浏览器/Web应用使用的API。依赖于react-router, 同时将 react-router 的 API 重新暴露(export)出来;
  • react-router-native:供 React Native 应用使用的API。同时将react-router的API重新暴露(export)出来;

以下是 v3 中的一些核心思想,但在 v4 中是不正确的:

  • 路由集中在一个地方。
  • 布局和页面嵌套是通过 <Route> 组件的嵌套而来的。
  • 布局和页面组件是完全纯粹的,它们是路由的一部分。

升级到 v4:https://www.jianshu.com/p/e2277aaa53f1

  • 使用包 react-router-dom
  • 不再用 <Router>
  • 对于redux应用,用 react-router-redux 的 <ConnectedRouter>
  • 不能直接嵌套 Route,应该使用;Index Route 失效
  • 不再可以从params中取URL参数了,使用 match(没有解析)
  • Route 的 onEnter, onUpdate 和 onLeave 之类的事件没有了

在 v4 中:just component

http://undefinedblog.com/react-router-0-13-3/

http://www.ruanyifeng.com/blog/2016/05/react_router.html

ReactRouter提供的组件:

ReactRouter.Route;

ReactRouter.RouteRoute;

ReactRouter.Link;

ReactRouter.State;

ReactRouter.Default

State让组件能够通过 this.getParams() 或 this.getQuery() 等方法获取到当前路由的各种值或参数

在使用了这些方法的组件中添加 mixins: [ReactRouter.State]

//mixins在ES6写法中不支持,可以props直接读取Link的params,query/location

Link是 a 标签的包装,它接受的 props 有 to、params 和 query

to 可以是路由名称或者href,激活的路由会添加active CSS类名

params 是路由中的参数, query是url中的参数(?)

RouteHandler代表当前路由匹配到的 React 组件 // 0.13之后改用 {this.props.children}

Route组件定义路由

Route 接受的 props 包括 name、path、handler 等等。

其中 name 就是to路由名称

path 指明的是当前路由对应的 url,可是绝对和相对

path 还支持指定 params,就是 : 及后面跟着的名称。"/movie/:id",params.id 获取值

还支持通配符,  /move/(:id) id可选;/file/*.* 匹配如/file/img.jpg; /* 匹配更目录下所有路由; /**/*.jpg 不论层级

path匹配重复时,只有第一个有效

component指定路由渲染的组件,{Movie}

最后使用run将定义的路由指定的组件渲染进DOM//也就是每次改变hash的时候都会执行

在路由定义中可以使用DefaultRoute设置默认组件,也可以使用Redirect指定默认组件,NotFoundRoute未找到预设组件时显示的组件

动态路由,如path=“/movies/:id?”,相应组件要增加逻辑动态判断

js控制路由之间的跳转:使用 Navigation mixin,然后在需要跳转的时候用 this.transitionTo 方法即可

表单处理: browserHistory.push(path)

Route 可以定义 onEnteronLeave 两个 hook ,这些hook会在页面跳转确认时触发一次, onLeave 从最下层的子路由开始直到触发最外层父路由结束。

坑:Link组件的to属性还有些不能用?用search出错是否其他原因

貌似是1.0新的:

onEnter属性

IndexRoute对象

IndexLink只有IndexRoute被渲染后才激活(加激活className)这个link

路径语法除了:param还有()可选,*匹配任意字符串(非贪婪的)直到命中下一个字符或者整个 URL 的末尾,并创建一个 splat 参数

Route 可以定义 getChildRoutesgetIndexRoutegetComponents 这几个函数。

在服务端渲染:

  • 使用 match 在渲染之前根据 location 匹配 route
  • 使用 RoutingContext 同步渲染 route 组件
SuperMade with Super