一、认识ReactRouter
一个路径path对应一个组件component,当我们在浏览器中访问一个path,对应的组件会在页面进行渲染
创建路由项目
javascript
// 创建项目
npx create router-demo
// 安装路由依赖包
npm i react-router-dom
// 启动项目
npm run start
简单的路由小案例
javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
const router = createBrowserRouter([
{
// http://localhost:3000/login
path:'/login',
element:<div>登录</div>
},
{
// // http://localhost:3000/article
path:'/article',
element:<div>文章</div>
}
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<RouterProvider router={router}></RouterProvider>
</React.StrictMode>
);
正式创建路由
- 新建src/page
page下面新建每个路由对应的文件夹
Article/index.js
javascript
const Article = () => {
return <div>我是文章页</div>
}
export default Article
Login/index.js
javascript
const Login = () => {
return <div>我是登录页</div>
}
export default Login
- 然后创建src/router/index.js 路由配置文件
javascript
import Login from "../page/Login";
import Article from "../page/Article";
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
{
path:'/login',
element:<Login />
},
{
path: '/article',
element:<Article />
}
])
export default router
- 最后在src/index.js中注册
javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import router from "./router"
import { RouterProvider } from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<RouterProvider router={router}></RouterProvider>
</React.StrictMode>
);
二、路由导航
什么是路由导航
路由系统中的多个路由之间需要进行 路由跳转 ,并且在跳转的同时有可能需要 传递参数进行通信
声明式导航与编程式导航
声明式导航
指通过<Link />组件描述要跳转到哪里,比如后台管理系统的左侧菜单。
Link被解析成a链接,传参通过字符串拼接实现。
javascript
<Link to="/article">文章</Link>
编程式导航
通过useNavigate钩子得到导航方法,然后通过调用方法以命令式的方式进行路由跳转,比如登录请求完毕之后跳转就可以选择这种方式。
个人总结就是,声明式导航是html标签形式,编程式导航是js函数形式。
javascript
import { Link, useNavigate } from "react-router-dom"
const Login = () => {
const navigate = useNavigate()
return (
<div>
我是登录页
{/* 声明式导航 */}
<Link to="/article">go article</Link>
{/* 编程式导航 */}
<button onClick={() => navigate('/article')}>go article</button>
</div>
)
}
export default Login
vue小链接:
声明式导航<router-link to="/article"></router-link>
编程式导航 this.$router.push('/article') (vue2)
const router = useRouter()
router.push('/article') (vue3)
导航传参
searchParams传参
跳转页(发送参数)
javascript
navigate('/article?id=1001&name=jack')
目标页(接收参数)
javascript
// 别忘了 useSearchParams要导入
const [params] = useSearchParams()
const id = params.get('id')
const name = params.get('name')
params传参
跳转页(发送参数)
javascript
navigate('/article/1001/name')
目标页(接收参数)
javascript
//别忘了 useParams要导入
const params = useParams()
const id = params.id
const name = params.name
router/index.js
javascript
{
path: '/article/:id/:name',
element:<Article />
}
三、嵌套路由
嵌套路由配置
使用children属性配置路由嵌套关系
使用<Outlet/>组件配置二级路由渲染位置
定义一级路由Layout,二级路由About、Board
javascript
// Layout/index.js
import { Link, Outlet } from "react-router-dom"
const Layout = () => {
return (
<div>
<div> 我是一级路由Layout </div>
<Link to="/board">面板</Link>
<br/>
<Link to="/about">关于</Link>
{/* 二级路由出口 */}
<Outlet/>
</div>
)
}
export default Layout
javascript
// About/index.js
const About = () => {
return (
<div> 我是二级路由About </div>
)
}
export default About
javascript
// Board/index.js
const Board = () => {
return (
<div> 我是二级路由Board </div>
)
}
export default Board
路由配置文件
javascript
{
path:'/',
element: <Layout />,
children:[
{
path:'board',
element: <Board/>
},
{
path:'about',
element:<About />
}
]
},
默认二级路由
javascript
{
path:'/',
element: <Layout />,
children:[
{
// path:'board',
index: true,
element: <Board/>
},
{
path:'about',
element:<About />
}
]
},
四、404路由配置
场景:当浏览器输入url的路径在整个路由配置中都找不到对应的 path,为了用户体验,可以使用 404 兜底组件进行渲染
- 准备一个NotFound组件
- 在路由表数组的末尾,以*号作为路由path配置路由
新增组件NotFound/index.js
javascript
const NotFound = () => {
return (
<div>
<h1>404 Not Found</h1>
</div>
)
}
export default NotFound
路由配置
javascript
{
path:'*',
element:<NotFound/>
}
五、两种路由模式
createBrowserRouter -- history模式
createHashRouter -- hash模式
附-项目技术点
配置src别名路径@
路径解析配置
路径解析配置(webpack), 把 @/ 解析为 src/
- 安装craco
npm i -D @craco/craco- 项目根目录下创建配置文件
craco.config.js- 配置文件中添加路径解析配置
- 包文件中配置启动和打包命令
安装包
新增根目录下配置文件craco.config.js
javascript
const path = require('path')
module.exports = {
webpack:{
alias:{
'@':path.resolve(__dirname, 'src')
}
}
}
更改package.json
javascript
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
路径联想配置
路径联想配置(VsCode), VsCode 在输入 @/ 时,自动联想出来对应的 src/下的子级目录
- 根目录下新增配置文件 - jsconfig.json
- 添加路径提示配置
jsconfig.json
javascript
{
"compilerOptions":{
"baseUrl": "./",
"paths":{
"@/*":[
"src/*"
]
}
}
}
数据Mock
在前后端分类的开发模式下,前端可以在没有实际后端接口的支持下先进行接口数据的模拟,进行正常的业务功能开发
json-server实现数据Mock
json-server是一个node包,可以在不到 30 秒内获得零编码的完整的Mock服务
- 项目中安装json-server
npm i -D json-server- 准备一个json文件
- 添加启动命令
- 访问接口进行测试
安装完毕之后在项目根目录新建server/data.json并放入数据内容
然后在package.json下scripts里新增一条
javascript
"server": "json-server ./server/data.json --port 8888"
执行 npm run server,有如下结果即启动成功