react学习——23react中的路由的使用（重要）
一、路由的基本使用
1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签
<Link to="/xxxxx">Demo</Link>
3.展示区写Route标签进行路径的匹配
<Route path='/xxxx' component={Demo}/>
4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>
<Link className="list-group-item" to="/about">About</Link>
<Link className="list-group-item" to="/home">Home</Link>
{/* 注册路由组件---> */}
<Route path={'/about'} component={About}></Route>
<Route path={'/home'} component={Home}></Route>
<BrowserRouter>
<App />
</BrowserRouter>
二、路由组件与一般组件
1.写法不同：
一般组件：<Demo/>
路由组件：<Route path="/demo" component={Demo}/>
2.存放位置不同：
一般组件：components
路由组件：pages
3.接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性
history:
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
push: ƒ push(path, state)
replace: ƒ replace(path, state)
location:
pathname: "/about"
search: ""
state: undefined
match:
params: {}
path: "/about"
url: "/about"
三、NavLink与封装NavLink
1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
封装
import React, {Component} from "react";
import {NavLink} from "react-router-dom";
export default class MyNavLink extends Component {
render()
{
const {title} = this.props;
return(
<NavLink activeClassName='atguigu' className="list-group-item" {...this.props}/>
);
}
}
使用
<MyNavLink to="/about" title="About" a={1} b={2} c={3}>About</MyNavLink>
<MyNavLink to="/home" title="Home">Home</MyNavLink>
四、Switch的使用
1.通常情况下，path和component是一一对应的关系。
2.Switch可以提高路由匹配效率(单一匹配)。
<Switch>
<Route path={'/about'} component={About}></Route>
<Route path={'/home'} component={Home}></Route>
<Route path={'/home'} component={Test}></Route>
</Switch>片
五、解决多级路径刷新页面样式丢失的问题
1.public/index.html 中 引入样式时不写 ./ 写 / （常用）
2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
3.使用HashRouter
六、路由的严格匹配与模糊匹配
1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2.开启严格匹配：<Route exact={true} path="/about" component={About}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
七、Redirect的使用
1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
2.具体编码：
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Redirect to="/about"/>
</Switch>
八、嵌套路由
1.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的
父路由
<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>
{/* 注册路由 */}
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Redirect to="/home"/>
</Switch>
子路由
<li>
{/*<MyNavLink to="/home/news">News</MyNavLink>*/}
<MyNavLink to="/home/news">news</MyNavLink>
</li>
<li>
<MyNavLink to="/home/message">Message</MyNavLink>
</li>
</ul>
{/* 注册路由 */}
<Switch>
<Route path={'/home/news'} component={News}></Route>
<Route path={'/home/message'} component={Message}></Route>
<Redirect to={'/home/news'}></Redirect>
</Switch>
九、向路由组件传递参数
1.params参数
路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
接收参数：this.props.match.params
2.search参数
路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.search
备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
3.state参数
路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.state
备注：刷新也可以保留住参数
import React, { Component } from 'react'
import {Link,Route} from "react-router-dom";
import Detail from "./Detail";
export default class Message extends Component {
state = {
messageArr:[
{id:1,title:'001'},
{id:2,title:'002'},
{id:3,title:'003'}
]
}
render() {
const {messageArr} = this.state
return (
<div>
<ul>
{
messageArr.map(item=>{
return <li key={item.id}>
{/*向路由组件传递params参数*/}
{/*<Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link> */}
{/*向路由组件传递search参数*/}
{/*<Link to={`/home/message/detail/?id=${item.id}&title=${item.title}`}>{item.title}</Link>*/}
{/*向路由组件传递state参数*/}
<Link to={
{pathname:'/home/message/detail',
state:{
id:item.id,
title:item.title}
}}>{item.title}</Link>
</li>
})
}
</ul>
<hr/>
{/*声明接收params参数*/}
{/*<Route path="/home/message/detail/:id/:title" component={Detail}/>*/}
{/*search参数无需声明接收，正常接收路由即可*/}
{/*<Route path={"/home/message/detail"} component={Detail}/>*/}
{/*state参数无需声明接收，正常接收路由即可*/}
<Route path={"/home/message/detail"} component={Detail}/>
</div>
)
}
}
import React, {Component} from "react";
// import qs from 'qs'
const DetailData=[
{
id:1,
content:'content1'
},
{
id:2,
content:'content2'
},
{
id:3,
content:'content3'
}
]
export default class Detail extends Component {
render()
{
console.log(this.props);
//接收params参数
// const {id,title}=this.props.match.params;
//接收search参数
// const {search}=this.props.location
// const {id,title}=qs.parse(search.slice(1))
//接收state参数
const {id,title}=this.props.location.state;
const findResult=DetailData.find(item=>item.id===Number(id));
return(
<ul>
<li>ID:{id}</li>
<li>Title:{title}</li>
<li>Content:{findResult.content}</li>
</ul>
);
}
}
十、编程式路由导航
借助this.prosp.history对象上的API对操作路由跳转、前进、后退
-this.prosp.history.push()
-this.prosp.history.replace()
-this.prosp.history.goBack()
-this.prosp.history.goForward()
-this.prosp.history.go()
replaceShow = (id,title)=>{
console.log(id,title)
//replace跳转+携带params参数
// this.props.history.replace(`/home/message/detail/${id}/${title}`)
//replace跳转+携带search参数
// this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)
//replace跳转+携带state参数
this.props.history.replace(`/home/message/detail?`,{id,title})
}
pushShow(id, title) {
//push跳转+携带params参数
// this.props.history.push(`/home/message/detail/${id}/${title}`)
//push跳转+携带search参数
//this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)
//push跳转+携带state参数
this.props.history.push(`/home/message/detail?`,{id,title})
}
goback=()=> {
this.props.history.goBack()
}
goforward=() =>{
this.props.history.goForward()
}
goTest = () => {
this.props.history.go(2)
}
十一、BrowserRouter与HashRouter的区别
1.底层原理不一样：
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
2.path表现形式不一样
BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
HashRouter的路径包含#,例如：localhost:3000/#/demo/test
3.刷新后对路由state参数的影响
(1).BrowserRouter没有任何影响，因为state保存在history对象中。
(2).HashRouter刷新后会导致路由state参数的丢失！！！
4.备注：HashRouter可以用于解决一些路径错误相关的问题。
原文地址：https://blog.csdn.net/ChenJin_2/article/details/140317542
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！