该图来自React 官方中文文档 – 用于构建用户界面的 JavaScript 库官方logo
react路由介绍:React Router: Declarative Routing for React.js
一次学习,随处路由
组件是 React 强大的声明式编程模型的核心。React Router 是一组导航组件,它们以声明方式与您的应用程序组合在一起。无论您是想要为您的 Web 应用程序提供可添加书签的 URL还是在React Native 中导航的可组合方式,React Router 都可以在 React 渲染的任何地方使用——所以请选择!
react路由手册:
React Router: Declarative Routing for React.js
路由安装:
安装命令:npm i react-router-dom@5.0 -S
npm i [email protected] -S
路由组件相关:
BrowserRouter 浏览器路由
HashRouter 哈希路由
NavLink 导航链接
exact精确匹配 to 链接地址 class="active" 匹配状态
Route 路由容器
exact精确匹配
(路径和配置的path完全匹配) path 路由地址 component 组件
<Redirect> 重定向
to 去哪儿 from 从那
<Switch> 匹配一个路由
<Prompt>
路由离开调用弹框
when 当条件为真 message 弹出文本内容
<Link>跳转
to=“/login”
to={{
pathname:"/login",
search:"name=mumu&age=18",
hash:"#good",
state:{redirect:"xxx"}
}}
参数 props里面的location一致的
404页面
- Switch 包裹(一次匹配一个)2. path=“*” 3. 配置放在最后面
路由的参数
path="produce/:id” 切换 to=“/produce/abc” 获取:props.match.params.id
子路由
在主路由添加
<div>
<Route path="/admin/dash" component={Dash}></Route>
<Route path="/admin/orderlist" component={OrderList}></Route>
{/* 重定向 */}
<Redirect path="/admin" to="/admin/dash"></Redirect>
</div>
路由props相关:
1. match匹配的路由
params
路由的参数
isExact
是否精确匹配
path路径
url 地址
2.history历史记录
push 跳转 replace 替换历史记录 go跳转历史记录 goBack 返回 goForward 前进 linsten 监听
location 同 location length 长度
3.location地址栏信息
hash哈希值 pathname地址名称 search 查询信息 state跳转传入数据
只有 Route 对应的component才有这三个自动注入参数
版权归原作者 风尚云网 所有, 如有侵权,请联系我们删除。