React-router

React-router介绍

什么是路由？
路由是根据不同的 url 地址展示不同的内容或页面。

React Router
一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URl之间的同步映射关系。

安装React router

安装依赖 使用2.8.1版本的依赖

npm install react-router@2.8.1 -D

配合 react/react-dom 15.6.1版本使用

准备React组件

import React from ‘react’
import ReactDOM from ‘react-dom’

import { Router, Route, Link, hashHistory} from ‘react-router’

react-router中定义了history这个属性 用于方便管理路由的方向 browserHistory／ hashHistory

索引 IndexRoute

定默认情况下加载的子组件。你可以把IndexRoute想象成某个路径的index.html。

例如：

<Route path="/" component={App}>
    <IndexRoute component={Index}/>　//IndexRoute改变的是某一路由下展示的组件，并不改变原有的路由。
</Route>

重定向

重定向：
当路径匹配from的时候，自动重定向(跳转)到to的地址上面。

<Route path=”/index" component={index}>
    <Redirect from=”/index/a" to=“/other" />
</Route>

从 from 跳转到 to

重定向 :跳转到某个路径

<IndexRedirect to="/home"/>

路径跳转
在事件中进行路由路径跳转

hashHistory.push(‘/home’) 类似于vue中的编程式路由

---

绝对路径
相对路径：
不以/开头的路径，匹配时就会相对于父组件的路径。

<Route path="inbox" component={Inbox}>
   <Route path="messages/:id" component={Message} />
</Route>

访问路径：/inbox/messages/:id

绝对路径：
以/开头的路径。如果在嵌套路由中使用会跳出父组件的影响。

<Route path="inbox" component={Inbox}>
   <Route path=“/messages/:id" component={Message} />
</Route>

访问路径：/messages/:id

---

地址栏传参 params

定义：

导航标签/绑定具体的值：

<Link    to=“/users/1>users</Link>

路由规则中：来绑定一个变量用来保存导航标签保存的值：
<Route path="/user/:xxxx" component={User}/>

取得参数：
this.props.params.xxxx

this.props.params.xxxx==1

---

查询符-query
query传参：在导航标签上用JSON对象的格式绑定传递的变量和值，对象中的字符串用单引号包括。

接收：this.props.location.query.xxx

例如：

<Link to={{pathname:'/list',query:{id:item.goodsID} }}>


url：/user/10086?foo=bar

this.props.params.userId 是 10086
this.props.location.query.foo 是 bar

---

样式
当路径匹配时会触发activeStyle属性。

const ACTIVE = { color: ‘red’ }

普通链接

<Link  to="/users"  activeStyle={ACTIVE}>users</Link>

---

创建react项目

npm install -g create-react-app 全局环境
create-react-app my-app 创建项目 默认创建的为高版本

cd my-app 进入项目
npm start 启动

react 中脚手架的包管理器为yarn

---

总结：

路由的各个组件的生命周期和普通的组件生命周期是一样的。路由根据不同的url来加载和卸载不同的组件。

react-router@2.8版本：请求走秀网数据

请求商品列表：

从商品列表跳转详情页，详情组件作为Home的兄弟组件：

从商品列表跳转详情页，详情组件作为Home的子组件：

---

react-router @ 4.2

与react-router@2.8版本的语法区别：
（1）依赖安装,不用再写版本
npm i react-router react-router-dom -D
（2）文件导入：
import {BrosweHistory as Router, Route, Link , Switch,Redirect} from ‘react-router-dom’;
（3）取消了路由容器，利用Router，Route，Link形成一个路由容器，Router中有且只有一个根节点，Link标签写在Router中，否则会报错。
（4） 重定向：利用<Redirect to=“/...” />，但是需要注意的是使用重定向的时候要用Switch标签包住路由规则，并且重定向标签写在路由规则的最后面。

<Router>
        <div>
            <Link to="/home">首页</Link>
            <Link to="/about">关于</Link>
            <Switch>
                <Route path="/home" component={Home}></Route>
                <Route path="/about" component={About}></Route>
                <Redirect to=“/...” />
            </Switch>
        </div>
    </Router>

（5）接收params方式传递的参数重点内容，使用this.props.match.params.xxxx

（6）编程式路由：this.props.hisory.push(‘/…’);
因为BrowserRouter 相当于 <Router history={history}>故可直接通过history进行push跳转

嵌套组件中 ，将详情页的内容显示在home中，配置如上。