React-router 笔记 官方文档
基本思路
- react-router 通过react 组件的方式实现,
- 路由相关的数据，通过props传递给组件调用,
- 路由层级关系， 通过标签嵌套实现
基础标签
- BrowserRouter ： 路由容器
- 该组件只能包含单个元素
- Route : 组件渲染出口
- 必须包含在 BrowserRouter 中
- exact 精确匹配
- Link : 跳转链接
- 必须包含在 BrowserRouter 中
基本使用
// react-router-demo
import React, { Component } from 'react'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
// component
import Btn from'./btn'
// pages
function home(props){
return (
<div className="home">
home
</div>
)
}
function products(props){
return (
<div className="products">
products
</div>
)
}
function about(props){
return(
<div className="about">
about
</div>
)
}
function product(props){
return (
<div>
product
</div>
)
}
// router-config
const routerConfig = [
{
label: 'home',
path:'/',
component: home,
exact: true,
},
{
label: 'products',
path: '/products',
component: products,
exact: true,
},
{
label: 'about',
path: '/about',
component: about
},
{
label: 'procut',
path: '/products/:id',
component: product
}
]
// container
export default class pages extends Component{
render(){
const buildLabel = () =>{
let tempalte = [];
for(let item of routerConfig){
tempalte.push(
<Btn key={item.label}>
<Link to={item.path}>
{item.label}
</Link>
</Btn>
)
}
return tempalte
}
return (
<Router>
<div className='pages-container'>
<div className="tab">
{buildLabel()}
</div>
{
routerConfig.map((item) =>{
return (
<Route exact={item.exact} key={item.label} path={item.path} component={item.component}/>
)
})
}
</div>
</Router>
)
}
}
路由传参
- 配置参数路径： path = '/:params'
- 函数组件， 通过组件参数中的 match.params[paramName] 获取路由参数
// pages
function home(props){
return (
<div className="home">
in home page
<br/>
router parmas:
<br/>
{ props.match.params.userId }
</div>
)
}
render(){
return (
<Router>
<div className='pages-container'>
<Link to='/userId'>
to user page
</Link>
<Route exact path='/' component={home}></Route>
<Route path='/:userId' component={home}></Route>
</div>
</Router>
)
}
重定向 Redirect
通过返回组件 Redirect 实现重定向
function subPage(props){
return (
<Redirect to={{
pathname: '/in_show_page'
}}></Redirect>
)
}
return (
<Router>
<div className='pages-container'>
<Link to='/subPage'>
to sub page
</Link>
{/* 参数路由 */}
<Route path='/:userId' component={home}></Route>
{/* 重定向路由 */}
<Route path='/subPage' component={subPage}></Route>
</div>
</Router>
)
命令式导航(history)
- 命令式导航，通过history上的方法实现
- 为props 添加 history 参数, 在组件内部获取路由相关的参数，及控制路由动作
withRouter
- 对于 Route 绑定的组件，组要是页面，本身已经将 路由接口包裹在props中, 而其他组件想获取路由接口需要通过 withRouter(compoent) 处理.
- withRouter 处理的组件必须包裹在 <Router> 标签中s, 也就是说, 子组件中路由参数等，来自于包裹的 Router 对象
// 使用 withRouter 处理组件，组件props中将包含 路由相关对象, { match, location, history }
// 定义组件
function jump (props){
const { match, location, history } = props;
console.log(props)
return (
<div>
<button onClick={ history.goBack }> back </button>
<button onClick={ () =>{history.push('/home')} }> jump to home </button>
<button onClick={ () =>{ history.replace('/subPage') } }> replace path </button>
</div>
)
}
// 在父组件中构件
render(){
return (
<Router>
<div className="route-render">
<Link to='/history'> history </Link>
<Route path='/history' component={withRouter(jump)} ></Route>
</div>
</Router>
)
}
跳转拦截 (Prompt)
- 使用Prompt, 可在路由跳转前，执行相关操作
//跳转提示, 每次路由跳转，提示信息
<Prompt message="路由将跳转"/>
//message 为函数
<prompt message={ lcoation => (`跳转地址 ${location.pathname}`) } />
// 带触发条件 when = Boolean
<Propmt when={ location.pathname === '/home' } message='你将进入home页面' />
//
标签API
<Router>
- history: 绑定history对象, 方便外部调用
<Route>
- component: 渲染组件, 组件props将包含, { match, location, history } 路由参数
- render: 通过函数渲染组件, 通过渲染简单组件的方式, 及通过该方式，为子组件配置参数
- children: 构建自定义链接标签,
- path: 路由匹配地址
- exac: 是否精确匹配
- stric: 使用严格模式
<Switch>
- 多路径匹配时，只渲染就近配置路径下的组件
/**
* 路径为 '/' 只会渲染 home 组件
*/
<Switch>
<Route path='/' componet={home}/>
<Route path='/about' componet={about}/>
<Route path='/product' componet={product}/>
</Switch>
路由参数
-
match
- params ：查询参数
- isExac : 是否精确匹配
- path : 包含 basename 路径
- url: Link 地址
-
location
- key: 'ac3df4', // 标识符
- pathname: '/somewhere' //路由地址
- search: '?some=search-string',
- hash: '#howdy',
- state: { [userDefined]: true }
-
history
- length : 记录条数
- action : 当前记录
- location : location
- push: 添加纪录，（跳转页面）
- replace: 替换当前记录 (跳转页面)
- go: 跳转到某条记录
- goBack: 回退
- goForward: 前进
路由嵌套
- 我们知道路由组件都包含在 <BrowserRouter> 中， 且该标签只能包含单一子元素，我们可以认为该标签创建一个路由环境, 包含在该标签内的 路由组件无论层级数，都归属于该路由环境.
//父组件
<App>
<BrowserRouter>
<div>
<Route path='/' component={Home} />
<Route path='/about' component={About} />
<Sub/>
</div>
</BrowserRouter>
</App>
//子组件
<div className='sub'>
<Link to='/about'> to about </Link>
<Route path='/about' rennder={ () =>( <div> in sub about </div> ) } />
</div>
/**
* Sub中的路由组件 与App中的路由组件处于同一层级, 当点击 Link标签时， 将进入 About 而不是Sub的自定义组件
*/
- 创建属于当前页的子路由需要，需要创建新的 '<BrowserRouter>' 标签, 在没有配置basename的情况下，子路由的路径将以上级路由路径为基础, 且优先匹配当前路由环境下的组件, 例如： 父组件路径: '/home' 子组件下有 <Route path='/sub'>, 实际路径为： '/home/sub' 所以在划分路径时， 需要注意路径嵌套的问题，如对根路径 '/' 的处理, 很可能出现，路由配置冲突。
//父路由
let AppRouter = [
{
label: 'home',
path: '/',
component: Home,
exact: true
},
{
label: 'user-center',
path: 'user-center',
component: UserCenter
},
{
label: 'books',
path: '/books',
component: Books
},
{
label: 'book',
path: '/books:id',
component: Books
}
]
return (
<Router>
<div className="App">
<Switch>
{routes}
</Switch>
</div>
</Router>
);
//子路由
<Router>
<div>
<h4>路由</h4>
<Link to='/books'> to sub </Link>
<Route path='/' render={ () =>( <div> 路由嵌套 path='/' </div> ) }></Route>
<Route path='/books' render={ () =>( <div> 路由嵌套 path='/sub' </div> ) }></Route>
</div>
</Router>
/*
** 这是个路由冲突的例子, 可以看到，在父组件和子组件中，都配置了路径 '/books',
** 当触发 Link 跳转时，将显示自组件内的组件， 即显示: '路由嵌套，path=/sub'
** 看起来一切正常，但当我们刷新页面， 将进入主路由的 Books 组件, 所以对于这样的路由冲突，编写时不易发现
*/
component, rander, children 的区别
- component 是应用最多的渲染接口，一般组件使用该接口就可以了， 该接口在渲染是将调用creatElement 构建组件
- rander 接受一个渲染函数， 构建时直接调用函数返回的模板， 不会调用creatElement, 这里是与component不同的地方， rander主要用在需要为组件传递一些 props参数时使用， 如果我们在component 中传入匿名函数包裹的组件， 该组件将被反复调用， 应该creatELement函数无法对匿名函数做比较。参考: React router的Route中component和render属性的使用
- children 无论路径是否匹配都将被渲染， 不同的是, 对于已匹配的路径，children 组件内将获取到 match 参数
自定义history
- 一般在浏览器使用的路由为 BrowserRouter，该路由是封装后的Router，提供了默认的history，所以该路由没有history 接口， 我们可以使用Router 自定特定类型的Router
import { Router} from 'react-router-dom'
import { createBrowserHistory } from 'history'
// 创建history
const history = createBrowserHistory()
// 包装原方法, 添加日志功能
const go = history.go
history.go = n => {
console.log(`go to --> ${n}`)
go(n)
}
// 监听路由变化, 重定向
history.listen(( location, action ) => {
const isLogin = false
if( isLogin ) {
setTimeout(() => {
history.push("/login")
})
}
})
网友评论