React Router v4

[MikeMiller3]

@doc

动态路由 @source

作者认为v2版本的路由让人沮丧，它被API所限制，不符合作者的内心设想的模型。对应于v4版本之前的静态路由，v4使用了动态路由，所谓动态，即它在app渲染时发生，而不在app之外的配置或约定中。这意味着在react-router中，一切几乎都是组件。v4中router被认为是UI，相当于一个页面级别的组件。遇到问题请思考如何将组件进行组合，所有的react-router问题都将成为react问题。（官方直译，见谅）
一个路由组件是一个页面url符合当前route则渲染对应组件的UI

服务端渲染

• https://reacttraining.com/react-router/web/guides/server-rendering

代码拆分（路由/组件懒加载）

• https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/code-splitting.md#code-splitting

• https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html

整合redux

• https://github.com/reacttraining/react-router/tree/master/packages/react-router-redux

API @source

一个路由组件props为match，匹配的路由对象

prompt

离开页面前调用的钩子函数，用于表单填写一半时提示用户是否离开

Switch

路由的匹配规则：

• 若path未填，则所有url均可匹配到该路由相当于path='/*'
• 默认为模糊匹配，exact=true为精确匹配
• Switch包裹的Route只匹配第一个，这样就不用写那么多exact了，顺序定好了就行了
  ###BrowserRouter
  history路由。

Link

链接

NavLink

菜单链接，匹配当前路由会显示样式

MemoryRouter

会在内存中保存url，用于非浏览器环境如RN

Redirect

重定向，history将被重写

Route

在匹配路由时渲染一些UI
有三种渲染方式，所有渲染方式都含有这三个props：match、location、history

• match属性: path, url, isExact, params
• location的属性: 见location的api
• history的属性: 见history的api
  react使用React.createElement创建一个新的组件。（卸载旧组件，挂载新组件）
  在匹配到时调用该函数。若组件存在则只会更新，不会卸载
  唯一与其他两个不同的是，match若未匹配到，会返回null。若组件存在则只会更新，不会卸载

Router

• Router是一个低级api，通常用于使用状态管理库（如Redux，Mobx）去同步一个自定义的history，在route中不是必须使用状态管理，这只用于深度定制。常用的高级api如BrowserRouter、HashRouter、MemoryRouter、NativeRouter、StaticRouter

history

• history由react router人员开发，并由router依赖这个包
• history is mutable，所以推荐使用location而不是history.location。
• 属性：length（栈长度）, action（如PUSH,POP,REPLACE）, location, createHref, push, replace, go, goBack（=go(-1)）, goForward（=go(1)）, block, listen

location

Location代表应用的位置。可用于history.push, history.replace

• 假如你需要给location加某些状态（state），那么你可以使用Location以便在页面进入后可以通过Location访问到
• 属性：pathname, search, hash, state

matchPath

• This lets you use the same matching code that uses except outside of the normal render cycle, like gathering up data dependencies before rendering on the server.

withRouter

让你在Router外获取到match, location, history，每次都将重新渲染组件。