开发单页应用, 首先绕不开的内容就是路由, react router v4 版本是最新的版本. 和之前的版本相比, 成熟了很多, 也简单了很多, 使用起来更加方便.
react-router v4 可以用于 web 和 native. 这里主要讨论基于 web 的应用.
react-router 有很多 components, 但是只要掌握下面 3 个 component 就可以管理好 react 应用的路由了.
router 是整个应用的路由. 在 web 应用中, 使用 browerrouter 来包装 app
<browserrouter> <app /> </browserrouter>
然后, 在 app component 中, 就可以使用 route 来定义各个路由对应的 component
每个 route 都是一个具体的路由, 对应一个具体的页面. route 可以对应一个 component, 也可以直接写个匿名的 render 函数.
route 中最常用的属性就是 path, 也就是路由的地址, 除此之外, route 最重要的作用是会将 { match, location, history } 3 个属性注入到对应的 component 或者 render 函数中.
link 是用来导航的, 也就是在不同 route 之间切换就会用到 link.
示例工程的创建采用 create-react-app 工具.
$ create-react-app route-test $ cd route-test $ yarn add react-router-dom
修改工程中的 app.js 文件, 增加 route 的 sample
import react, { component } from 'react' import { browserrouter as router, route, link } from 'react-router-dom' import './app.css' const index = () => <h2>home</h2> const about = () => <h2>about</h2> const users = () => <h2>users</h2> class app extends component { render() { return ( <router> <div> <nav> <ul> <li> <link to="/">home</link> </li> <li> <link to="/about/">about</link> </li> <li> <link to="/users/">users</link> </li> </ul> </nav> <route path="/" exact component={index} /> <route path="/about/" component={about} /> <route path="/users/" component={users} /> </div> </router> ) } } export default app
这个示例中, 就包含了 3 个常用组件 router, route 和 link
路由的参数可以加在 path 上, 下面的示例中, users component 可以通过注入的 match 来得到 url 中的参数.
import react, { component } from 'react' import { browserrouter as router, route, link } from 'react-router-dom' import './app.css' const index = () => <h2>home</h2> const about = () => <h2>about</h2> const users = ({ match }) => ( <h2> user is {match.params.name}, age: {match.params.age} </h2> ) class app extends component { render() { return ( <router> <div> <nav> <ul> <li> <link to="/">home</link> </li> <li> <link to="/about/">about</link> </li> <li> <link to="/users/test/16">users</link> </li> </ul> </nav> <route path="/" exact component={index} /> <route path="/about/" component={about} /> <route path="/users/:name/:age" component={users} /> </div> </router> ) } } export default app
除了上面那种 restful 的参数方式, 也可以通过 query 来传递参数. 下例中, 通过 location.search 来获取 querystring, 至于解析 querystring, 已有很多现成的方法可以使用.
import react, { component } from 'react' import { browserrouter as router, route, link } from 'react-router-dom' import './app.css' const index = () => <h2>home</h2> const about = ({ match, location }) => ( <h2>about's search string: {location.search}</h2> ) const users = ({ match }) => ( <h2> user is {match.params.name}, age: {match.params.age} </h2> ) class app extends component { render() { return ( <router> <div> <nav> <ul> <li> <link to="/">home</link> </li> <li> <link to={{ pathname: '/about/', search: '?name=test&age=16' }}> about </link> </li> <li> <link to="/users/test/16">users</link> </li> </ul> </nav> <route path="/" exact component={index} /> <route path="/about/" component={about} /> <route path="/users/:name/:age" component={users} /> </div> </router> ) } } export default app
在刚开始使用 react-router 时, 可能会有些疑问, 我整理了自己在使用中一些疑惑:
match, location, history 这 3 个 object, 是由 route component 作为 props 注入到它的 render 方法, 或者 component={xxx} prop 对应的组件中的
比如上面的例子中, 对于 /users
当有多个 route 并列时, 如果外层没有包裹 switch, 那么匹配到的 route 都会被 render, 如果有 switch, 那么只会 render 第一个匹配上的 route
route 如果不设置 path, 则每次都会匹配成功
navlink 是一种特殊的 link, 它可以设置一些 active 时的样式.
路由信息本质上也是一种状态信息, 放不放在 redux 中来管理, 相信很多人都会纠结. 官方的建议是不要把路由的状态放在 redux 的 store 中来管理, 理由如下:
如对本文有疑问, 点击进行留言回复!!
使用纯前端JavaScript实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
网友评论