前端学习--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/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

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

const About = () => {
    return (
        <div> 我是二级路由About </div>
    )
}

export default About
// Board/index.js

const 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路由配置

场景:当浏览器输入url的路径在整个路由配置中都找不到对应的 path,为了用户体验,可以使用 404 兜底组件进行渲染

1. 准备一个NotFound组件
2. 在路由表数组的末尾,以*号作为路由path配置路由
新增组件NotFound/index.js
const NotFound = () => {
    return (
        <div>
            <h1>404 Not Found</h1>
        </div>
    )
}

export default NotFound

路由配置

{
     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

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"
  },

路径联想配置

路径联想配置(VsCode), VsCode 在输入 @/ 时,自动联想出来对应的 src/下的子级目录
1. 根目录下新增配置文件 - jsconfig.json
2. 添加路径提示配置

 jsconfig.json

{
    "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里新增一条

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/190715.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一文读懂MySQL基础与进阶

Mysql基础与进阶 Part1 基础操作 数据库操作 在MySQL中&#xff0c;您可以使用一些基本的命令来创建和删除数据库。以下是这些操作的示例&#xff1a; 创建数据库&#xff1a; 要创建一个新的数据库&#xff0c;您可以使用CREATE DATABASE命令。以下是示例&#xff1a; CREA…

C++ day36 贪心算法 无重叠区间 划分字母区间 合并区间

题目1&#xff1a;435 无重叠区间 题目链接&#xff1a;无重叠区间 对题目的理解 移除数组中的元素&#xff0c;使得区间互不重叠&#xff0c;保证移除的元素数量最少&#xff0c;数组中至少包含一个元素 贪心算法 局部最优&#xff0c;使得重叠区间的个数最大&#xff0c…

MyBatis Generator使用总结

MyBatis Generator使用总结 介绍具体使用数据准备插件引入配置条件构建讲解demo地址 介绍 MyBatis Generator &#xff08;MBG&#xff09; 是 MyBatis 的代码生成器。它能够根据数据库表&#xff0c;自动生成 java 实体类、dao 层接口&#xff08;mapper 接口&#xff09;及m…

【STM32单片机】自动售货机控制系统设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用STM32F103C8T6单片机控制器&#xff0c;使用OLED显示模块、矩阵按键模块、LED和蜂鸣器、继电器模块等。 主要功能&#xff1a; 系统运行后&#xff0c;OLED显示系统初始界面&#xff0c;可通过…

Java王者荣耀

第一步是创建项目 项目名自拟 第二部创建个包名 来规范class 然后是创建类 GameFrame 运行类 package com.sxt;import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; im…

网络和Linux网络_5(应用层)HTTP协议(方法+报头+状态码)

目录 1. HTTP协议介绍 1.1 URL介绍 1.2 urlencode和urldecode 1.3 HTTP协议格式 1.4 HTTP的方法和报头和状态码 2. 代码验证HTTP协议格式 HttpServer.hpp 2.2 html正式测试 Util.hpp index.html 2.3 再看HTTP方法和报头和状态码 2.3.1 方法_GET和POST等 2.3.2 报头…

springboot函数式web

1.通常是路由(请求路径)业务 2.函数式web&#xff1a;路由和业务分离 一个configure类 配置bean 路由等 实现业务逻辑 这样实现了业务和路由的分离

代码常见问题

1. 前端页面出现404了&#xff1a; 1&#xff09;那说明你该页面里面有某个接口地址&#xff08;url&#xff09;写错了&#xff0c;后台没有这个接口 2&#xff09;你后台写了这个接口&#xff0c;但是后台忘了重启服务了&#xff0c;这样的话前端也映射不上的 所以404的时…

歌曲《兄弟情深》:歌手荆涛歌曲中的真挚情感

在人生的道路上&#xff0c;有时我们会遇到迷茫、失落、困惑等种种情境。而在这些时刻&#xff0c;身边有一个真挚的兄弟&#xff0c;其意义是无法估量的。歌手荆涛演唱的《兄弟情深》即是对这种深厚情感的美妙歌颂。 一、迷茫时的指引 “当我迷茫时&#xff0c;有你帮目标重新…

箱型图 Box Plot 数据分析的法宝

文章目录 一、箱形图的介绍二、六大因数三、Box plot的应用四、箱形图的优劣势五、图形拓展 一、箱形图的介绍 箱形图又称为盒须图、盒式图、盒状图或箱线图&#xff0c;是一种用作显示一组数据分散情况资料的统计图。因型状如箱子而得名。在各种领域也经常被使用&#xff0c;…

Sqlserver 在数据库‘master’中拒绝了Create Database的权限

解决方案 打开SqlServer Manament Studio软件&#xff0c;然后登陆 选择安全性->登录名->找到您当前的用户 在您的登陆名上&#xff0c;点击右键-属性&#xff0c;配置相应的服务器角色权限&#xff08;这块需要勾选dbcreator的权限&#xff0c;这块如果不清楚还需要啥…

c语言:模拟实现各种字符串函数(2)

strncpy函数&#xff1a; 功能&#xff1a;拷贝指定长度的字符串a到字符串b中 代码模拟实现&#xff1a; //strncpy char* my_strncpy(char* dest, char* str,size_t num) {char* ret dest;assert(dest && str);//断言&#xff0c;如果其中有一个为空指针&#xff…

Linux篇:文件系统

一、共识原理&#xff1a; 文件文件内容文件属性 磁盘上存储文件存文件的内容&#xff08;数据块&#xff09;存文件的属性&#xff08;inode&#xff09; Linux的文件在磁盘中存储是将属性和内容分开存储的。 二、硬件简述&#xff1a; 1. 认识硬件 磁盘&#xff1a;唯一的一…

4.一维数组——用数组处理求Fibonacci数列前20项

文章目录 前言一、题目描述 二、题目分析 三、解题 程序运行代码 四、结果显示 前言 本系列为一维数组编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 用数组处理求Fibonacci数列前20项 二、题目分析 前两项&#xff1a;f[20]{1,1} 后18项&#xff1a;for(…

vue3+tsx的使用

<template><div><xiaoman on-click"getItem" name"似懂非懂"></xiaoman></div> </template><script setup langts>import xiaoman from "./App"const getItem(item:any)>{console.log(item,it…

王者小游戏作业

一、创建好文件、包、类、插入图片文件夹 二、beast包 1、Bear类 package beast; import sxt.GameFrame; public class Bear extends Beast {public Bear(int x, int y, GameFrame gameFrame) {super(x, y, gameFrame);setImg("C:\\Users\\陆先生\\Desktop\\王者荣耀图片…

C++学习之路(四)C++ 实现简单的待办事项列表命令行应用 - 示例代码拆分讲解

本期示例介绍: 本期示例《待办事项列表应用》展示了一个简单的任务管理系统&#xff0c;用户可以通过命令行界面执行添加任务、删除任务和显示任务列表等操作。 功能描述&#xff1a; 添加任务功能&#xff1a; 用户可以输入任务描述&#xff0c;将新的任务添加到任务列表中。…

设计模式—依赖倒置原则(DIP)

1.概念 依赖倒置原则&#xff08;Dependence Inversion Principle&#xff09;是程序要依赖于抽象接口&#xff0c;不要依赖于具体实现。简单的说就是要求对抽象进行编程&#xff0c;不要对实现进行编程&#xff0c;这样就降低了客户与实现模块间的耦合。 通俗的讲&#xff1…

【教学类-06-13】20231126 (55格版)趣味题(一)1-9加法题(10倍)(整十相加)

作品展示 背景需求&#xff1a; 1、会做加法题的孩子5分钟内完成题目&#xff0c;太快了&#xff0c;所以为了拉平差异&#xff0c;需要给这些会做另外的题目&#xff0c;比如提供一些他们没有做过的“趣味题形”。 2、好多次&#xff0c;听见大班孩子在互相“考试”——“老…

04_MySQL备份与恢复

任务背景 一、真实案例 某天&#xff0c;公司领导安排刚入职不久的小冯同学将生产环境中的数据(MySQL数据库)全部导入到测试环境给测试人员使用。当小冯去拿备份数据时发现&#xff0c;备份数据是1个礼拜之前的。原因是之前运维同事通过脚本每天对数据库进行备份&#xff0c;…