当前位置: 首页 > news >正文

react路由详解

在学习react路由之前,我们肯定需要安装路由。大家先运行如下命令安装路由。安装之后随我一起探索react路由。

安装 版本v6

npm i react-router-dom -S

页面准备

创建两个文件夹 pages和 router
pages文件夹里面放的是页面
router文件夹里面是进行路由配置

路由配置

1.router文件夹里面新建index.js
2.导入useEffect 和 useState,以及路由useRoutes
3.进行路由配置,和vue很像,但里面是path和element
4.创建方法路由 导出
const element = useRoutes(baseRoutes);
return <>{element}</>
export default RouterView;

router index.js里面

import { useEffect, useState } from "react";
// useRoutes 根据路由配置 创建路由
import { useRoutes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
function RouterView() {// 基本路由配置const baseRoutes = [{path: "",element: <Home></Home>,},{path: "/about",element: <About></About>,},{path: "/produce/:id",element: <Produce></Produce>,},{path:"/admin/*",element:<Admin></Admin>,children:[{path:'',element:<Dash></Dash>},{path:'dash',element:<Dash></Dash>},{path:'orderlist',element:<OrderList></OrderList>},]}];// 常见路由const element = useRoutes(baseRoutes);return <>{element}</>;
}export default RouterView;

App.js包装

导入hash路由 as起别名 hash路由设为Router
这里和vue有点不同,是用Router包裹RouterView
里面可以写跳转的链接 < NavLink >或者< link >
(Link导航链接 没有active类,NavLink有active类)

// 导入hash路由 as起别名 hash路由设为Router
import  {HashRouter as Router,NavLink} from "react-router-dom";
//导入创建好的路由
import RouterView from "./router";
<Router><RouterView></RouterView>
</Router>

admin页面

// import { useState } from "react";
// 导入hash路由 as起别名 hash路由设为Router
import  {HashRouter as Router,NavLink} from "react-router-dom";
//导入创建好的路由
import RouterView from "./router";
function App() {return (<Router><NavLink to="">首页</NavLink><NavLink to={{pathname:'/about'}}>关于</NavLink><NavLink to={{pathname:'/produce/abc'}}>产品abc</NavLink><NavLink to="/produce/123">产品123</NavLink><NavLink to="/admin">admin</NavLink><RouterView></RouterView></Router>);
}export default App;

组件

HashRouter哈希路由(所有的路由组件和方法必须包裹在这个路由里面)
NavLink 导航链接(选中多个action)可以写成下面两种形式
to="/about"
to={{pathname:"/about"}}
Link导航链接 没有active类,NavLink有active类
Outlet子路由容器 这一点也是和vue的区别
admin页面

import { Outlet,Link } from "react-router-dom";
function Admin() {return (  <div><h3>Admin</h3><p><Link to="/admin/dash">概览</Link><Link to="/admin/orderlist">订单列表</Link></p><Outlet></Outlet></div>);
}export default Admin;

use方法

useRoutes创建路由
Index.js 使用useRoutes 根据路由配置 创建路由

// 
import { useRoutes } from "react-router-dom";

useParams 获取路由参数
produce.js页面使用usePrams
{params.id}接收参数
这样我们在路径上传不同的参数可以切换

<NavLink to={{pathname:'/produce/abc'}}>产品abc</NavLink><NavLink to="/produce/123">产品123</NavLink>

在这里插入图片描述
produce 页面

import {useParams} from 'react-router-dom'
function Produce() {const params=useParams()return ( <div>产品页面-{params.id}</div>);
}export default Produce;
http://www.lryc.cn/news/7050.html

相关文章:

  • mysql数据库完全备份和增量备份与恢复
  • CF1667E Centroid Probabilities
  • 全网详细总结com.alibaba.fastjson.JSONException: syntax error, position at xxx常见错误方式
  • 快速部署个人导航页:美好的一天从井然有序开始
  • 【Python】如何在 Python 中使用“柯里化”编写干净且可重用的代码
  • ROS笔记(4)——发布者Publisher与订阅者Subscribe的编程实现
  • Linux进程概念(一)
  • Leetcode.1124 表现良好的最长时间段
  • 达梦数据库会话、事务阻塞排查步骤
  • sqlServer 2019 开发版(Developer)下载及安装
  • 使用Arthas定位问题
  • 性能测试之tomcat+nginx负载均衡
  • 【手写 Vuex 源码】第十一篇 - Vuex 插件的开发
  • opencv基础知识和绘图图形
  • 15- 决策回归树, 随机森林, 极限森林 (决策树优化) (算法)
  • Flink相关的记录
  • 配置可视化-基于form-render的无代码配置服务(一)
  • Java 代理模式详解
  • 知识付费小程序怎么做_分享知识付费小程序的作用
  • 14- 决策树算法 (有监督学习) (算法)
  • 如何编译和运行C++程序?
  • Golang 给视频添加背景音乐 | Golang工具
  • 让AI护理医疗:解决卫生系统的痛点
  • Windows 离线安装 MySQL 8
  • 【前端攻城狮之vue基础】02路由+嵌套路由+路由query/params传参+路由props配置+replace属性+编程式路由导航+缓存路由组件
  • CHAPTER 1 Zabbix介绍及安装
  • 认识V模型、W模型、H模型
  • excel ttest检测
  • PDFPrinting.Net操作进行细粒度控制
  • SegPGD