风尚学React--路由安装及路由props了解篇

风尚云网

已于 2022-02-04 16:23:44 修改

阅读量947

点赞数 10

分类专栏：风尚学React 文章标签： react.js 前端 reactjs

于 2022-01-05 21:03:03 首次发布

本文链接：https://blog.csdn.net/zsx0806/article/details/122331205

版权

风尚学React 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该图来自React 官方中文文档 – 用于构建用户界面的 JavaScript 库官方logo

react路由介绍：React Router: Declarative Routing for React.js

只有 Route 对应的component才有这三个自动注入参数

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 react-router-dom@5.0 -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页面

1. 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>