东莞seo网站制作报价,河东网站建设,赣州网站建设怎么样,沧州网站建设方案咨询黑马React: ReactRouter
Date: November 21, 2023 Sum: React路由基础、路由导航、导航传参、嵌套路由配置
路由快速上手 1. 什么是前端路由
一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候#xff0c;path 对应的组件会在页面中进行渲染 2. …黑马React: ReactRouter
Date: November 21, 2023 Sum: React路由基础、路由导航、导航传参、嵌套路由配置
路由快速上手 1. 什么是前端路由
一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候path 对应的组件会在页面中进行渲染 2. 创建路由开发环境
# 使用CRA创建项目
npx create-react-app react-router-pro# 安装最新的ReactRouter包
npm i react-router-dom# 启动项目
npm run start3. 快速开始 import React from react
import ReactDOM from react-dom/clientconst router createBrowserRouter([{path:/login,element: div登录/div},{path:/article,element: div文章/div}
])ReactDOM.createRoot(document.getElementById(root)).render(RouterProvider router{router}/
)抽象路由模块 路由导航
1. 什么是路由导航
路由系统中的多个路由之间需要进行路由跳转并且在跳转的同时有可能需要传递参数进行通信 2. 声明式导航 声明式导航是指通过在模版中通过 组件描述出要跳转到哪里去比如后台管理系统的左侧菜单通常使用这种方式进行 Link to/article文章/Link语法说明通过给组件的to属性指定要跳转到路由path组件会被渲染为浏览器支持的a链接如果需要传参直接通过字符串拼接的方式拼接参数即可 3. 编程式导航
编程式导航是指通过 useNavigate 钩子得到导航方法然后通过调用方法以命令式的形式进行路由跳转比如想在登录请求完毕之后跳转就可以选择这种方式更加灵活
语法说明通过调用navigate方法传入地址path实现跳转
import { Link, useNavigate } from react-router-domconst Login () {const navigate useNavigate()return (div我是登陆页{/* 声明式写法 */}Link to/article跳转到文章页/Link{/* 命令式写法 */}button onClick{() navigate(/article)}跳转到文章页/button/div)
}export default Login导航传参 searchParams传参
src/page/Article/index.js
import { useSearchParams } from react-router-domconst Artitlce () {const [params] useSearchParams()const id params.get(id)const name params.get(name)return div我是文章页 - {id} - {name}/div
}export default Artitlceparams传参
src/page/Article/index.js
import { useSearchParams, useParams } from react-router-domconst Artitlce () {// const [params] useSearchParams()// const id params.get(id)// const name params.get(name)const params useParams()let id params.idlet name params.name// return div我是文章页 - {id} - {name}/divreturn div我是文章页 - {id} - {name}/div
}export default Artitlcesrc/router/index.js
import Login from ../page/Login/index
import Article from ../page/Article/indeximport { createBrowserRouter } from react-router-domconst router createBrowserRouter([{path: /login,element: Login/},{// path: /article,path: /article/:id/:name, // 配置router中的id与nameelement: Article/},
])export default router注意采用 params 这种方式需要配置一波router 嵌套路由配置
1. 什么是嵌套路由
在一级路由中又内嵌了其他路由这种关系就叫做嵌套路由嵌套至一级路由内的路由又称作二级路由例如 2. 嵌套路由配置
实现步骤: 使用 children属性配置路由嵌套关系 使用 Outlet/ 组件配置二级路由渲染位置
Case:
Code:
router/index.js
const router createBrowserRouter([{path: /,element: Layout/,children: [{path: board,element: Board/},{path: About,element: About/}]},{path: /login,element: Login/,},{// path: /article,path: /article/:id/:name,element: Article/},
])src/page/Layout/index.js
const Layout () {return (div我是一级路由layout组件--Link to/board面板/Link--Link to/about关于/Link{/* 配置二级路由出口 */}Outlet/Outlet/div)
}Res: 拓展
路由出口路径匹配的组件显示的位置
参考路由出口的基础知识
Vue2路由 3. 默认二级路由
需求默认就显示二级路由比如默认显示面板
当访问的是一级路由时默认的二级路由组件可以得到渲染只需要在二级路由的位置去掉path设置index属性为true router.js
const router createBrowserRouter([{path: /,element: Layout/,children: [{index: true, // 默认显示 indexelement: Board/},{path: About,element: About/}]},{path: /login,element: Login/,},{// path: /article,path: /article/:id/:name,element: Article/},
])Layout/index.js
这里需要把
import { Outlet, Link } from react-router-dom
import Board from ../Board
import About from ../Aboutconst Layout () {return (div我是一级路由layout组件--Link to/面板/Link // 修改原来的 to/board 变为 to/--Link to/about关于/Link{/* 配置二级路由出口 */}Outlet/Outlet/div)
}export default Layout4. 404路由配置
场景当浏览器输入url的路径在整个路由配置中都找不到对应的 path为了用户体验可以使用 404 兜底组件进行渲染
实现步骤
准备一个NotFound组件在路由表数组的末尾以*号作为路由path配置路由 ![
page/NotFound
const NotFound () {return (divthis is not found/div)
}export default NotFoundrouter/index.js
import Login from ../page/Login/index
import Article from ../page/Article/index
import Layout from ../page/Layout
import About from ../page/About
import Board from ../page/Board
import NotFound from ../page/NotFoundimport { createBrowserRouter } from react-router-domconst router createBrowserRouter([{path: /,element: Layout/,children: [{index: true,element: Board/},{path: About,element: About/}]},{path: /login,element: Login/,},{// path: /article,path: /article/:id/:name,element: Article/},{path: *,element: NotFound/}
])export default router5. 俩种路由模式
各个主流框架的路由常用的路由模式有俩种history模式和hash模式, ReactRouter分别由 createBrowerRouter 和 createHashRouter 函数负责创建
路由模式url表现底层原理是否需要后端支持historyurl/loginhistory对象 pushState事件需要hashurl/#/login监听hashChange事件不需要
Code:
history模式
import { createBrowserRouter } from react-router-domconst router createBrowserRouter([Res: hash模式
import { createBrowserRouter, createHashRouter } from react-router-domconst router createHashRouter([Res:
