React Router 用法
React Router 用法
一、DEMO
import React from "react"; import { HashRouter as Router, Route, Link } from 'react-router-dom' const First = () => <div>第一个示例的第【1】个路由，第一个路由在第一个和第二个url里都会显示，但不在第三个显示</div> const Second = () => <div>第一个示例的第【2】个路由，只在第二个url里显示</div> const Third = () => <div>第三个示例</div> class BaseDemo extends React.Component { render() { return <div> <h3>React-router基础示例</h3> <h3>路由数据被存储在 this.props.match 里，这是其中的值{JSON.stringify(this.props.match)}</h3> <Router> <div> {/* this.props.match.url 表示当前url */} <li><Link to={`${this.props.match.url}/1`}>示例1</Link></li> <li><Link to={`${this.props.match.url}/2`}>示例2</Link></li> <li><Link to={`${this.props.match.url}/3`}>示例3</Link></li> <Route path={`${this.props.match.url}/1`} component={First}/> <Route path={`${this.props.match.url}/2`} component={First}/> <Route path={`${this.props.match.url}/2`} component={Second}/> <Route path={`${this.props.match.url}/3`} component={Third}/> </div> </Router> </div> } }
二、路由嵌套
在顶级路由匹配到组件后，子组件里面也可能有一个次级路由。
假如顶级路由的url为：/1，那么次级路由匹配后的路径一般来说是 /1/2；
但是假如当前路径是 /1，然后次级路由里有这样一个标签 <Link to="/2"}>示例2</Link>。
当我们点击这个标签时，跳转的 url 是 /2，而不是我们期望的 /1/2。因此我们需要拿到之前的 url /1，具体方法就是通过路由的 match 属性来拿，于是就有了这种写法：
<li><Link to={`${this.props.match.url}/2`}>示例2</Link></li>
意思就是跳转到当前路径，后面再拼接 /2这个路径。
相对应的，我们在 Route 标签里也要添加相同的内容：
<Route path={`${this.props.match.url}/2`} component={second}/>
示例（子路由是 ChildRouter）：
import React from "react"; import { HashRouter as Router, Route, Link } from 'react-router-dom' const First = () => <div>第一个示例的第【1】个路由，第一个路由在第一个和第二个url里都会显示，但不在第三个显示</div> const Second = () => <div>第一个示例的第【2】个路由，只在第二个url里显示</div> const ChildRouter = (route) => <div>第一个示例的第【3】个路由，只在第三个url里显示 <Router> <div> <h3>以下是子路由的属性</h3> <p>{JSON.stringify(route)}</p> <li><Link to={`${route.match.url}/1`}>跳转子1</Link></li> <li><Link to={`${route.match.url}/2`}>跳转子2</Link></li> <hr/> {/* component 是一个React组件。 * 注意，组件是放在这个属性里，而不是 Route 包裹的里面 * */} <Route path={`${route.match.url}/1`} component={() => <h3>这里是子1</h3>}/> <Route path={`${route.match.url}/2`} component={() => <h3>这里是子2</h3>}/> </div> </Router> </div> class RoutingNested extends React.Component { render() { return <div> <h3>React-router 路由嵌套</h3> <h3>路由数据被存储在 this.props.match 里，这是其中的值{JSON.stringify(this.props.match)}</h3> <Router> <div> {/* this.props.match.url 表示当前url */} <li><Link to={`${this.props.match.url}/1`}>示例1</Link></li> <li><Link to={`${this.props.match.url}/2`}>示例2</Link></li> <li><Link to={`${this.props.match.url}/3`}>示例3</Link></li> <hr/> <Route path={`${this.props.match.url}/1`} component={First}/> <Route path={`${this.props.match.url}/2`} component={Second}/> <Route path={`${this.props.match.url}/3`} component={ChildRouter}/> </div> </Router> </div> } }
三、props
react-router 的路由信息，都存储在组件的 props 里。
之所以是存在 props 里，是因为我们写在父组件里的，是 Route 标签，我们需要显示的组件，是作为 Route 标签的属性而传进去的。
而我们的组件，作为 Route 标签的子组件而存在，因此，路由数据通过 props 传给我们的组件。
因此：
1、只有 Route 标签里传入的组件，才能通过 props 属性读取路由属性（除非你自己手动传给子组件）；
2、每个能读取路由属性的组件，其 match 属性，获得的是当前级别的路由的属性（例如本级路由的 match.url = '/Params/2'，那么上级路由的 match.url = '/Params'
3、match.isExact：假如当前路径和 route 标签里的 path 完全相同，该值为 true，否则为 false（例如当匹配到次级路由时，那么上级路由的这个属性则为 false，次级当前的为 true）（当 url 为 / 时显示该组件，/a 不显示组件，需要使用这个）；
4、match 属性的值，是根据当前路由（组件所在的 route 标签）的层级而决定的；
5、location 属性的值，在每个能读取到这个属性的路由组件，都是相同的；
6、类似 /1?a=1 这样的路径，其中 ?a=1，是通过 location.search 来获取；
7、路由信息，当路由变化时，是会跟着一起更新的，但并不是实时更新的；
假如我通过点击 <Link> 标签，让路由从 /a 跳转到 /b ，也就是说，从显示 A 组件到显示 B 组件。会发生以下事情：
【1】如果 Link 标签里有一个 onClick 事件，那么显然可以拿到 location 属性的值。
在该事件执行的这段时间，props.location 的值，是 url 更新之前的。
并且，window.location（也就是原生的），其 url 也是更新之前的；
【2】那什么时候可以获取到更新之后的 url 呢？
答案是路由更新后，所对应的那个组件，在挂载的时候，生命周期处于 componentWillMount 时，可以获取到最新的 url。
因此如果需要第一时间在父组件内拿到更新后的值，那么需要在父组件，将回调函数传给子组件才可以实现。
实现原理：可以参考组件通信，父组件将回调函数传给表单组件，然后表单组件负责执行这个回调函数，并将修改后的值作为参数传给函数。
例如：
【1、先例行引入】
import React from "react";
import {HashRouter as Router, Link, Route} from 'react-router-dom'
【2、两个子组件，分别点击显示和直接显示在页面上】
class First extends React.Component { constructor() { super() this.log = this.log.bind(this) } render() { return <button onClick={this.log}>点击显示路由信息，点击后请查看控制台</button> } log() { console.log(this.props) } } const Second = props => <div> 函数组件显示路由信息：（这里是本级 Route 标签的部分信息） <pre>{JSON.stringify(props, undefined, 4)}</pre> </div>
【3、父组件，负责对比其 props 与子组件不同】
class RoutingNested extends React.Component { constructor() { super() } render() { return <div> <h3>React-router 参数设置</h3> <h3>注意，这里存的不是组件里的路由信息，而是上一级 Router 标签的路由信息</h3> <h3>路由数据被存储在 this.props 里，这是其中部分属性 <pre>{JSON.stringify(this.props, undefined, 4)}</pre></h3> <Router> <div> <li> <Link to={`${this.props.match.url}/1?a=1`} onClick={() => { console.log('Link 标签（跳转到/1）的 onClick 事件', this.props.location) }}> 示例1 </Link> </li> <li> <Link to={`${this.props.match.url}/2`} onClick={() => { console.log('Link 标签（跳转到/2）的 onClick 事件', this.props.location) }}> 示例2 </Link> </li> <hr/> <Route path={`${this.props.match.url}/1`} component={First}/> <Route path={`${this.props.match.url}/2`} component={Second}/> </div> </Router> </div> } }
四、参数
React路由取参数，有两种：
1、?a=1 ：这种属于 search 字符串，在 location.search 里取值；
2、/a/123 ：这种需要从 match.params里取值；
但无论哪种，路由获取到的值，是跳转后的那一刻的值，而不是实时更新的最新值。
具体来说：
例1：假如 Link 标签跳转路径实时绑定输入框的一个值（假如值是 abc），这个值作为参数传递；
点击跳转后，子组件读取到当前传的值 abc；
此时修改【1】中输入框的值为 def；
请问子组件读取到的值此时是多少？abc 还是 def；
答案是 abc；
原因是当前路径是 abc，这个值读取到的是当前路径的值，而不是将要跳转的路径的值，因此不是实时更新的（显然，也不应该是实时更新的）；
手动修改地址栏的 url：
例2：假如手动修改 url 为 ggg，那么请问读取到的值是多少？
我还真去试了一下。答案是除非你修改后，按回车跳转路径，会读取到最新的；
否则，依然保持为修改前 abc；
即使你重新触发 render 方法（比如修改 state 来实现），依然获取到的是 abc ，而不是 ggg；
获取最新值：
例3：如果你想要获取到新值，那么请重新点击跳转（绑定了新的 url 的 Link 标签）即可；
重新跳转后（假如跳转到同一个页面），url 改变了，那么组件会重新加载么？
答案是否定的，如果跳转到同一个组件，仅是参数改变，那么组件是不会重新加载的，即组件内的数据保持之前不变，只有传递的参数改变了（生命周期函数也不会重新执行）；
---生命周期：
1、组件的生命周期函数，只会在第一次挂载的时候执行，如果前后跳转是同一个组件，那么该组件的生命周期函数不会重复执行；
2、但 state 的生命周期，会多次执行（只要父组件的 state 改变了，子组件的相关函数会被执行）；
3、由于路由信息是通过 props 传值的，因此也会多次触发；
4、不过没有影响，传的值依然是旧值（因为路由信息没变）；
5、假如你在 state 生命周期函数里做了一些什么事情，可能需要注意一下会不会带来不良影响（虽然一般不会）；
示例：
【例行引入和子组件】
import React from "react"; import {HashRouter as Router, Link, Route} from 'react-router-dom' const First = props => <div> 第一个组件读取参数（location.search） {props.location.search} </div> const Second = props => <div> 第二个组件读取参数（match.params.myParams） {props.match.params.myParams} </div>
【父组件，负责配置路由和传值】
class RoutingNested extends React.Component { constructor() { super() this.state = { firstNumber: 0, secondNumber: 0 } this.changeFirst = this.changeFirst.bind(this) this.changeSecond = this.changeSecond.bind(this) } render() { return <div> <h3>4、React-router 传参</h3> <h3>请在对应的跳转标签里，输入你想要传的值</h3> <Router> <div> <li> <Link to={`${this.props.match.url}/1?a=${this.state.firstNumber}`} onClick={() => { console.log('Link 标签（跳转到/1）的 onClick 事件', this.props.location) }}> 示例1 </Link> <input type="text" value={this.state.firstNumber} onChange={this.changeFirst}/> </li> <li> <Link to={`${this.props.match.url}/2/${this.state.secondNumber}`} onClick={() => { console.log('Link 标签（跳转到/2）的 onClick 事件', this.props.location) }}> 示例2 </Link> <input type="text" value={this.state.secondNumber} onChange={this.changeSecond}/> </li> <hr/> <Route path={`${this.props.match.url}/1`} component={First}/> <Route path={`${this.props.match.url}/2/:myParams`} component={Second}/> </div> </Router> </div> } changeFirst(e) { this.setState({ firstNumber: e.target.value }) } changeSecond(e) { this.setState({ secondNumber: e.target.value }) } }
五、父组件传 【值】 or 【函数】 给子组件
1、路由传参是通过 props 传参的；
2、子组件，是写在 Route 标签的 component 属性中的；
3、通过 Route 标签绑定值，是无法将值，从父组件传给子组件的；
解决方案：
1）组件可以是一个函数；如const MySecond = () => <div>1</div>；
2）Route 标签的 component 属性支持以上函数写法（显而易见）；
3）我们可以将子组件嵌套到函数返回的组件中；
4）此时我们的组件结构如下：父组件 >> Route 标签 >> 函数组件 >> 子组件；
①父组件和 Route 进行数据通信没意义；
②父组件没办法和函数组件通信；
③但父组件可以直接和子组件通信；
5）因此，父组件将值先绑定给子组件标签，然后再返回函数组件；
6）父组件是可以和子组件通信的，但唯一问题是此时，如何将路由信息从函数组件传给子组件（路由信息从Route传给了函数组件）；
函数组件是可以拿到 props 的，通过 Object.assign() 将 props 和 父组件绑定给子组件的【函数/变量】混合到一起，再传给子组件。
此时，子组件就同时拿到了 路由数据 和 父组件 传给他的数据。
【传一个对象给子组件】
唯一可能存在的问题是，这个数据怎么传给子组件（毕竟是一个对象），我们之前接触的方法都是 k = v 方式传给子组件，但显然这个方法不能这么做。
React也有解决方法，具体来说，利用 es6 的扩展运算符 ...
比较简单的写法是 <First {...props}/> ，将自动展开 props 并传给 First 组件。
例如：
【例行引入依赖和子组件，子组件负责显示值】
import React from "react"; import {HashRouter as Router, Link, Route} from 'react-router-dom' class First extends React.Component { render() { return <div>【1】当前 time 值为：{this.props.time}</div> } } const Second = (props) => <div> 【2】time（负数）: {props.time * -1} </div>
【父组件】
class RoutingNested extends React.Component { constructor() { super() this.state = { time: 0 } } // 这个是生命周期，目的是为了测试 state 的传递 componentWillMount() { this.timer = setInterval(() => { this.setState({ time: this.state.time + 1 }) }, 1000) } // 卸载时，删除定时器 componentWillUnmount() { clearInterval(this.timer) } render() { // 这个写法和写在组件里，基本没什么区别，不过这样写感觉好看一些 const MySecond = props => { let obj = Object.assign({}, {time: this.state.time}, props) return <Second {...obj}/> } return <div> <h3>5、父组件传参给子组件</h3> <p>父组件当前值为：{this.state.time}</p> <Router> <div> <li> <Link to={`${this.props.match.url}`}> 跳转查看传参【1】 </Link> </li> <li> <Link to={`${this.props.match.url}/2`}> 跳转示例【2】 </Link> </li> <hr/> {/* 这种是写在组件里，没啥区别 */} <Route exact path={`${this.props.match.url}/`} component={props => { let obj = Object.assign({}, {time: this.state.time}, props) return <First {...obj}/> }}/> <Route path={`${this.props.match.url}/2`} render={MySecond}/> </div> </Router> </div> } }
六、path 和 url 的区别
在 match 属性中，有 path 和 url 属性，大部分时间他们是一样的，那么区别是什么呢？
假如路由匹配路径是 /Params/2/:myParams，实际跳转路径是 /Params/2/1（此时匹配成功）。
那么；
url：/Params/2/1
path：/Params/2/:myParams
七、Link 标签 to 属性为对象时（路由信息传值）
在组件里，每个组件的路由数据，都是各自独立的。
在之前分析中，已知：
match 属性的值，存储的是该 Route 标签的路由；
location 属性的值，其中 url 和 path 不同 Route 组件中，值是相同的；
但【2】并不准确，准确的说，自带的 hash ， search ， pathname 这三个属性的值，是相同的；
假如你在里面添加了其他数据，那么结果就有所不同了。
例如 Link 标签，他有一个属性 to，可以用于路径跳转。
比较常见的是以下这种写法：
<Link to={`${props.match.url}/`}>子路由</Link>
但是，to 的值，也可以用对象，例如这样：
<Link to={{ pathname: `${this.props.match.url}/1`, myState: '这是我自定义的变量' }}>示例1</Link>
当路由信息匹配时：
1、父组件的路由信息为：
{ "match": { "path": "/RouteInfo", "url": "/RouteInfo", "isExact": false, "params": {} }, "location": { "pathname": "/RouteInfo/1", "search": "", "hash": "" }, "history": { "length": 9, "action": "POP", "location": { "pathname": "/RouteInfo/1", "search": "", "hash": "" } } }
2、被传值的子组件的路由信息：
{ "match": { "path": "/RouteInfo/1", "url": "/RouteInfo/1", "isExact": true, "params": {} }, "location": { "pathname": "/RouteInfo/1", "myState": "这是我自定义的变量", "search": "", "hash": "" }, "history": { "length": 24, "action": "PUSH", "location": { "pathname": "/RouteInfo/1", "myState": "这是我自定义的变量", "search": "", "hash": "" } } }
可以看到，被传值的子组件的路由信息，location 会多了一个属性。
但是请注意，以下几种情况会导致失去这些信息：
刷新页面；
访问更深一层的子组件（因为信息被更新了）；
刷新后，访问相同的 url。举例来说，你访问了该 url，传值了也收到了，然后刷新页面，再点击该 url，是没有的。原因是相同 url 跳转；
八、重定向
重定向有两种方式，第一种是通过 <Redirect> 标签实现，第二种是通过编程式导航方式实现。
【<Redirect> 标签】
<Redirect to={'/default'}/>
【编程式导航方式】
this.props.history.push('/default')
两个的效果是一样的
九、登录拦截
1、需要组件：
1）登录功能组件；
2）受保护组件（需要登录后才能访问）；
3）受保护组件的父组件（可选，如果 1 和 2 不是同一个路径，则需要，否则可以不需要）（用于进入受保护组件之前，检查登录信息，不符合要求则跳转到登录组件）；
逻辑：（有父组件，登录和受保护组件不是同一个路径）
2、尝试访问受保护组件；
1）进入父组件，检查存储登录信息的对象，确认当前是否登录；
2）如果已登录，则允许访问受保护组件；
3）如果未登录，则触发重定向，进入登录组件；
4）登录组件输入信息，尝试登录；
5）输入信息符合要求后（不符合则报错），将信息写入存储登录信息的对象，并跳转到受保护组件的路径；
6）登录后，如果需要登出，则清除登录信息，并再次进行页面跳转；
比较核心的就是几点：
1、进入受保护页面时，需要先检查一下登录信息；
2、登录和登出时，除了写入和清除登录信息之外，还需要进行一次路径跳转（登录 -> 受保护页面，受保护页面 -> 未登录时的默认页面）（如何重定向参照【八】）；
十、路由配置
const RouteConfig = [ { path: 'first', component: First, name: '第一个路由', routes: [ { path: '1', component: ChildOne, name: '1-1' } ] }, { path: 'second', component: Second, name: '第二个路由' } ]
解释：
1、component 是组件；
2、path 是该组件对应的 url；
3、name 非必须，这里是为了省事，自动生成 Link 标签的描述文字才加的；
4、routes 可选，是该组件的子组件路由信息。具体来说，就是将这个值传给路由的子组件，然后子组件就可以拿这个生成自己的子路由信息了；
单纯看这个比较麻烦，我们先来看一个函数吧：
const createRouter = (routes, props) => ( <Router> <div> {/* 自动生成 Link 标签 */} {createLink(routes, props)} <hr/> {/* 自动生成 Route 标签 */} {createRoute(routes, props)} </div> </Router> ) createRouter(RouteConfig, props)
这个函数干了三件事：
1、创建了一个 Router 标签；
2、根据 routes （来源于上面的路由配置表），自动生成了多个 Link 标签；
3、以及多个 Route 标签；
预期上，这两个生成标签的函数，他们生成的 Link 标签和 Route 标签是一一对应的；
然后我们再分别看这两个生成函数，先看第一个生成 Link 标签的：
const createLink = (routes, props) => ( <ol> { routes.map(route => ( <li key={route.path}> <Link to={`${props.match.url}/${route.path}`}>{route.name}</Link> </li> )) } </ol> )
注意，createLink 传入的第一个参数，是一个数组（参考上面的 RouteConfig 变量）；
遍历这个数组，生成一个 li 标签，内包裹一个 Link 标签，其 to 属性是当前 url（props.match.url），后面加上路由路径 route.path，描述文字就是 route.name。
示例（map 返回数组的一个元素）：
<li key='first'>
<Link to={`/first`}>第一个路由</Link>
</li>
最后结果就是自动生成了导航栏。
然后我们再看另外一个生成 Route 标签的函数：
const createRoute = (routes, props) => ( <React.Fragment> {routes.map((route, i) => { let obj = { key: i, ...route, path: `${props.match.url}/${route.path}`, component: props => { let obj = {routes: route.routes, ...props} return <route.component {...obj}/> } } return <Route {...obj}/> })} </React.Fragment> )
懂了上面那个后，这个自然而言也很容易懂了。
遍历 routes ，取出 component 属性（即该路径对应的组件），
将当前子路由的路由配置表，如下：
routes: [ { path: '1', component: ChildOne, name: '1-1' } ]
混合到路由信息里（见 obj.component 属性，如果看不懂，请参考上面【7】中，component 的属性是一个函数的那个示例）。
这样，对应的子组件，就可以拿到路由配置表中，该组件的子路由信息了。
具体举例来说，就是 First 这个组件，可以从 props 里取出以下数据：
routes: [ { path: '1', component: ChildOne, name: '1-1' } ]
因此，子组件可以继续调用上面两个函数，来自动生成 Link 标签，和 Route 标签。
简单总结一下上面的过程：
1、调用函数 createRouter ，传参 路由配置表；
2、createRouter 函数会调用 自动生成 Link 标签 和 自动生成 Route 标签的函数；
3、createLink 函数，根据路由配置表，自动生成了当前层级的 Link 标签；
4、createRoute 函数，根据路由配置表，自动生成了当前层级的 Route 标签；
5、createRoute 函数，假如路由配置表某个对应组件，有 routes 属性，则自动将这个属性的值，传给了该组件，于是该组件可以拿到自己的，这一层级的子组件路由配置表；
