标签：历史记录 匹配 React 参数 location NavLink 路由
React路由
安装
npm i react-router-dom@5.0 -S
导入
// 导入路由相关组件
// 导入哈希路由 别名Router
// Route 路由页面
// NavLink 导航链接
// Redirect 重定向
// NavLink与Link区别：NavLink自动添加一个active的class
import { HashRouter as Router, Route, NavLink, Redirect, Switch, Prompt, Link } from 'react-router-dom'
组件
- BrowserRouter 浏览器路由
HashRouter 哈希路由 - Route 路由容器
exact 精确匹配
path 路由地址
component 组件
<Route path='/' exact component={Home}></Route>
- NavLink 导航链接
exact 精确匹配
（pathname和配置的path完全匹配）
to 链接地址
class=“active”
匹配状态
<NavLink to='/' exact>首页</NavLink>
- <Link> 跳转
to="/login"
to={{
pathname:"/login",
search:“name=mumu&age=18”,
hash:"#good,
state:{redirect:"xxx"}
}}
参数与props里面的location一致
-
<Redirect> 重定向
to 去哪儿
from 从哪儿 -
<Switch> 匹配一个路由
-
<Prompt> 路由离开时调用弹窗
when 当条件为真
message 弹出的文本内容 -
404
1.Switch包裹（一次匹配一个）
2.path="*"
3.配置放在最后面 -
子路由
//在主路由添加
<div>
<Route path="/admin/dash" component={Dash}></Route>
<Route path="/admin/orderlist" component={OrderList}></Route>
<Redirect path='/admin' to='/admin/dash'></Redirect>{/* 重定向 */}
</div>
路由配置
function App(){
return(
<Router>
<div>
<NavLink to='/' exact>首页</NavLink>|
<NavLink to='/about'>关于我们</NavLink>|
</div>
<Switch>
<Route path='/' exact component={Home}></Route>
<Route path='/about' component={About}></Route>
</Switch>
</Router>
)
}
export default App;
1.所有路由相关内容都应放入<Router>组件内
2.链接使用：<NavLink to=“地址”>
3.页面使用：<Router path=“地址” component={组件}>
路由参数
只有Route对应的component才有这三个自动注入的参数
match 匹配的路由
params 路由的参数
isExact 是否精确匹配
path 路径
url 地址
history 历史记录
push 跳转
replace 替换历史记录
go 跳转历史记录
goBack 返回
goForward 前进
listen 监听历史记录的变化
location 同location
length 历史记录的长度
location 地址栏信息
hash 哈希值
pathname 地址名称
search 查询信息
state 跳转传入的参数
1.链接传参
<NavLink to='/produce/abc'>产品abc</NavLink>
2.参数传参
<Route path='/produce/:id' component={Produce}></Route>
3.参数获取
<h1>{props.match.params.id}</h1>
标签：历史记录,匹配,React,参数,location,NavLink,路由 来源： https://blog.csdn.net/m0_51203368/article/details/122330753
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。