前端学习--React(4)路由

一、认识ReactRouter

一个路径path对应一个组件component，当我们在浏览器中访问一个path，对应的组件会在页面进行渲染

创建路由项目

// 创建项目
npx create router-demo// 安装路由依赖包
npm i react-router-dom// 启动项目
npm run start

简单的路由小案例

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/loginpath:'/login',element:<div>登录</div>},{// // http://localhost:3000/articlepath:'/article',element:<div>文章</div>}
])const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><RouterProvider router={router}></RouterProvider></React.StrictMode>);

正式创建路由

1. 新建src/page

page下面新建每个路由对应的文件夹

 Article/index.js

const Article = () => {return <div>我是文章页</div>
}export default Article

 Login/index.js

const Login = () => {return <div>我是登录页</div>
}export default Login

2. 然后创建src/router/index.js 路由配置文件

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

3. 最后在src/index.js中注册

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链接，传参通过字符串拼接实现。

<Link to="/article">文章</Link>

编程式导航

通过useNavigate钩子得到导航方法，然后通过调用方法以命令式的方式进行路由跳转，比如登录请求完毕之后跳转就可以选择这种方式。

 个人总结就是，声明式导航是html标签形式，编程式导航是js函数形式。

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传参

跳转页（发送参数）

navigate('/article?id=1001&name=jack')

目标页（接收参数）

// 别忘了 useSearchParams要导入const [params] = useSearchParams()
const id = params.get('id')
const name = params.get('name')

params传参

跳转页（发送参数）

navigate('/article/1001/name')

目标页（接收参数）

//别忘了 useParams要导入const params = useParams()
const id = params.id
const name = params.name

router/index.js

{path: '/article/:id/:name',element:<Article />
}

三、嵌套路由

嵌套路由配置

1. 使用children属性配置路由嵌套关系

2. 使用<Outlet/>组件配置二级路由渲染位置

定义一级路由Layout，二级路由About、Board

// 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

// About/index.jsconst About = () => {return (<div> 我是二级路由About </div>)
}export default About

// Board/index.jsconst Board = () => {return (<div> 我是二级路由Board </div>)
}export default Board

路由配置文件

{path:'/',element: <Layout />,children:[{path:'board',element: <Board/>},{path:'about',element:<About />}]
},

默认二级路由

{path:'/',element: <Layout />,children:[{// path:'board',index: true,element: <Board/>},{path:'about',element:<About />}]
},

四、404路由配置

1. 准备一个NotFound组件

2. 在路由表数组的末尾，以*号作为路由path配置路由

const NotFound = () => {return (<div><h1>404 Not Found</h1></div>)
}export default NotFound

{path:'*',element:<NotFound/>
}

createBrowserRouter --  history模式

createHashRouter -- hash模式

附-项目技术点

配置src别名路径@

路径解析配置

1. 安装craco

npm i -D @craco/craco

2. 项目根目录下创建配置文件

craco.config.js

3. 配置文件中添加路径解析配置

4. 包文件中配置启动和打包命令

 安装包

新增根目录下配置文件craco.config.js

const path = require('path')module.exports = {webpack:{alias:{'@':path.resolve(__dirname, 'src')}}
}

 更改package.json

  "scripts": {"start": "craco start","build": "craco build","test": "react-scripts test","eject": "react-scripts eject"},

路径联想配置

1. 根目录下新增配置文件 - jsconfig.json

2. 添加路径提示配置

 jsconfig.json

{"compilerOptions":{"baseUrl": "./","paths":{"@/*":["src/*"]}}
}

 数据Mock

json-server实现数据Mock

1. 项目中安装json-server

npm i -D json-server

2. 准备一个json文件

3. 添加启动命令

4. 访问接口进行测试

安装完毕之后在项目根目录新建server/data.json并放入数据内容

然后在package.json下scripts里新增一条

"server": "json-server ./server/data.json --port 8888"

执行 npm run server，有如下结果即启动成功