简介
官方简介
- React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。
个人理解
- 也就是将这个”网页”/”网站”，变得更加组件化，使元素树结构更加直观。
安装
-
以下二选一
1 2
$ npm install --save react-router-dom $ yarn add react-router-dom
内置包
1
import { Link, NavLink, Switch, Route, BrowserRouter } from 'react-router-dom'
Link | NavLink
-
作用与 a 标签类似:
将网页地址渲染为 “目标地址”(最终会被渲染为a元素)
可以理解为一个索引，仅仅是一个索引，如果 route 中没有对应的path，该标签无效。
NavLink是在Link的基础上增加了一些样式属性。
1 2 3 4 5 6 7
/* * to属性：在根目录的基础上将 value 添加到尾部并渲染地址栏。 * activeClassName属性：动态的 class ，NavLink 特有，根据点击的位置将该属性放在对应的标签上。 */ <NavLink to="/home" activeClassName="active">Home</NavLink> <NavLink to="/article">Article</NavLink> <NavLink to="/about">About</NavLink>
Route
-
根据路由中地址的变化，将与当前路由地址对应的组件渲染到APP中。
1 2 3 4 5 6 7
/* * path: 与 link/NavLink 的地址相对应。 * compoent: 写好的页面组件，放在这个位置，在路由地址变为path中的地址后即可直接渲染出对应组件的页面。 */ <Route path="/home" component={Home} /> <Route path="/article" component={Article} /> <Route path="/about" component={About} />
Redirect
-
重定向，跳向这个标签中的 to 属性中的地址。
1 2 3 4 5
/*当用户，账户密码输入正确后，重定向到登陆成功界面*/ <Redirect to="/login" /> /*当用户输入了不属于路由中定义过的地址时，重定向到404或者默认地址*/ <Redirect to="/home" /> <Redirect to="/notfound" />
Switch
-
根据这个组件的名字的意思可以知道，就是选择。
-
“地址相同的链接该如何判断”，Switch 会进行判断。
-
Switch 渲染第一个被 location 匹配到的并且作为子元素的
</kbd> 或者 </kbd> 一般动态路由经常会出现这种问题。
1 2 3 4 5 6
<Switch> <Route path='/home' component={Home} /> <Route path='/about' component={About} /> <Route path='/article' component={Article} /> <Redirect to='/home' /> </Switch>
Router
- React-Router时在history基础上实现了URL的UI同步，其URL对应的是location，UI对应的是React component。
通俗的说也就是，当页面地址栏中的地址在 经过不同的API转换后 与路由中的地址相同时，渲染出路由中所传入的组件。
并且：router一般要将所有router其他组件包起来。
BrowserRouter
-
通过 通过HTML5的history API，让页面的 UI 与 URL 同步，最终地址呈现结果与路由中的地址是一样的。
1 2 3
<BrowserRouter> <App /> </BrowserRouter>
HashRouter(一般不用)
-
HashRouter使用的是URL的hash部分（即window.location.hash），来保持页面的UI与URL的同步。
1 2 3 4
<HashRouter> <APP /> </HashRouter> // 最终地址栏会有一个# localhost:3000/#/
传值方法
params传值
1
2
<Link to={`/api1/${data}`} className="" ></Link>
<Route path='/api/:data' component={} ></Route>
取值
1
const {data} = this.props.match.params;
search传值
1
2
<Link to={`/api1/?data=${data}`} className="" ></Link>
<Route path='/api' component={} ></Route>
取值
1
2
3
//.search的值中带有"?"，需要去掉并转换为字符串(querystring)
import qs from 'querystring'
const {data} = qs.parse((this.props.location.search).slice(1))
state传值
1
2
3
4
<Link to={ { pathname: 'api后缀', state: { data: data } } } className="">
链接名
</Link>
<Route path='/api1' component={} />
取值
1
const {data} = this.props.location.state
路由跳转
通过按钮的点击事件来举例
1
2
//button
<button onClick={() => this.seeMore(data)}>more</button>
history.push
传入match.params
1
2
3
seeMore = (data)=>{
this.props.history.push(`/api1/${data}`)
}
传入location.search
1
2
3
seeMore = (data)=>{
this.props.history.push(`/api1/?data=${data}`)
}
传入location.state
1
2
3
seeMore = (data)=>{
this.props.history.push('/api1', { data } )
}