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

一、认识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>

);

正式创建路由

  1. 新建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
  1. 然后创建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
  1. 最后在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 />
}

三、嵌套路由

嵌套路由配置

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

  2. 使用<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 兜底组件进行渲染

  1. 准备一个NotFound组件
  1. 在路由表数组的末尾,以*号作为路由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/

  1. 安装craco
    npm i -D @craco/craco
  2. 项目根目录下创建配置文件
    craco.config.js
  3. 配置文件中添加路径解析配置
  4. 包文件中配置启动和打包命令

安装包

新增根目录下配置文件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/下的子级目录

  1. 根目录下新增配置文件 - jsconfig.json
  2. 添加路径提示配置

jsconfig.json

javascript 复制代码
{
    "compilerOptions":{
        "baseUrl": "./",
        "paths":{
            "@/*":[
                "src/*"
            ]
        }
    }
}

数据Mock

在前后端分类的开发模式下,前端可以在没有实际后端接口的支持下先进行接口数据的模拟,进行正常的业务功能开发

json-server实现数据Mock

json-server是一个node包,可以在不到 30 秒内获得零编码的完整的Mock服务

  1. 项目中安装json-server
    npm i -D json-server
  2. 准备一个json文件
  3. 添加启动命令
  4. 访问接口进行测试

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

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

javascript 复制代码
"server": "json-server ./server/data.json --port 8888"

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

相关推荐
dr李四维17 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~38 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ41 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript