React 路由react-router-dom详解
( 路由嵌套 + 路由传参 + 路由权限 + 路由优化 按需导入 + 404页面 )
前面我们先了解一下 路由是什么? 路由分类有哪些?内置API有哪些
?可能有点枯燥,不喜欢看的直接跳过
!
1,相关理解
- 单页Web应用(single page web application,SPA)。
- 整个应用只有一个完整的页面。
- 点击页面中的链接不会刷新页面,只会做页面的局部更新。
- 数据都需要通过ajax请求获取, 并在前端异步展现。
2,路由的理解:
1. 什么是路由?
- 一个路由就是一个映射关系(key:value)
- key为路径, value可能是function或component
2,react-router-dom的理解:
- react的一个插件库。
- 专门用来实现一个SPA应用。
- 基于react的项目基本都会用到此库。
一,基本路由使用:
先看看效果:
1,下载安装:
-
win + R
-
cmd 打开
-
cd/react项目文件目录
-
安装:
npm i react-router-dom -S
很好,你已经完成了,安装!
二, 接下来是使用路由的步骤
文件
1, 创建页面
在
src路径下
新建views文件
,页面组件新建在这里面
2,新建路由文件
在
src路径下
新建router文件夹
,在这里配置路由
3,配置路由文件:
在
router路径下
新建index.jsx文件夹
,在这里配置路由
- 导入路由依赖
// 导入路由依赖
import { useRoutes } from "react-router-dom";
- 导入所需组件,首页 关于
// 导入所需组件,首页 关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
- 创建路由
// 创建路由
const routes = [
{
path: "/",
element: (<HomeView></HomeView>)
},
{
path: "/about",
element: (<AboutView ></AboutView >)
},
];
- 使用useRoutes 创建,导出路由
// 使用useRoutes 创建
export default function RouterView() {
// 创建路由
const elem = useRoutes(routes);
// 返回接口
return elem;
}
完整代码:
以上配置是路由
基础配置
:
这样还是看不到效果的,要配置导航使用路由
4,使用并切换路由,配置App.jsx文件:
路径:src / App.jsx
- 导入:
import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom";
Router: 路由
RouterView: 路由组件 ,导入路由文件
HashRouter: 哈希路由
NavLink: 导航链接
- 使用,配置导航链接,这里使用 函数组件:
全部代码:
import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom";
function App() {
return (
<Router>
<NavLink to="/">首页</NavLink>  || 
<NavLink to="/about">关于</NavLink>  || 
<RouterView />
</Router>
);
}
export default App;
- 效果图:
三, 路由传参:
1,路由文件配置:
2,组件使用:
ProductView.jsx文件配置:
- 引入useParams
这里我新建了一个组件 ProductView.jsx
import { useParams } from "react-router-dom"
- 获取参数
const { id } = useParams()
- 渲染参数:
<h1>产品参数:{id}</h1>
ProductView.jsx 文件代码:
App.jsx 文件配置:
传参:
<NavLink to="/product/123">产品123</NavLink>  || 
<NavLink to="/product/456">产品456</NavLink>  || 
App.jsx 文件代码:
效果:
四, 路由嵌套:
- 路由文件配置:
src / router / index.jsx
// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件,首页 关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";
// 组件嵌套组件
import Private from "./Private";
// 创建路由
const routes = [
{
path: "/",
element: <HomeView></HomeView>
},
{
path: "/about",
element: <AboutView></AboutView>
},
{
path: "/product/:id",
element: <ProductView></ProductView>
},
{
path: "/admin",
element: <AdminView />
// 配置子路由
children: [
{
path: "",
element: <DashView></DashView>
},
{
path: "orderlist",
element: <OrderList></OrderList>
}
]
},
// 使用useRoutes 创建
export default function RouterView() {
// 创建路由
const elem = useRoutes(routes);
// 返回接口
return elem;
}
- 组件文件配置:
新建文件 以下图:
views / AdminView.jsx
文件:
import { NavLink, Outlet } from "react-router-dom";
function AdminView() {
return (
<div>
<h3>管理页面</h3>
<NavLink to="">管理页面</NavLink> || 
<NavLink to="orderlist">概览页面</NavLink>
<Outlet />
</div>
);
}
export default AdminView;
NavLink :导航链接
Outlet: 子组件容器
views / DashView.jsx
文件:
function DashView() {
return ( <div>
<h3>概览页面内容</h3>
</div> );
}
export default DashView;
views / OrderList.jsx
文件:
function OrderList() {
return (<div>
<h3>管理页面内容</h3>
</div>);
}
export default OrderList;
效果图:
五, 路由查询参数:
1, App.jsx
文件 导航配置:
代码:
import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom"
function App() {
return (<Router>
<NavLink to="/">首页</NavLink >  || 
<NavLink to="/about">关于</NavLink>  || 
<NavLink to="/admin">admin页面</NavLink>  || 
<NavLink to="/product/123">产品123</NavLink>  || 
<NavLink to="/product/456">产品456</NavLink>  || 
<NavLink to="/about?redirect=hello">产品hello</NavLink>  || 
<NavLink to="/about?redirect=word">产品word</NavLink>  || 
<RouterView></RouterView>
</Router>);
}
export default App;
传参:?redirect= “ 传的查询参数 ”
2,AboutView.jsx
文件:
代码:
import { useSearchParams, NavLink, useNavigate, useLocation } from "react-router-dom"
function AboutView() {
// 获取about查询参数redirect的值
const [SearchParams] = useSearchParams()
// 获取redirect的值
const redirect = SearchParams.get('redirect')
// 渲染
return (<div>
{/* // 传递查询参数 */}
<h1>About页面查询参数:-{redirect}</h1>
</div>);
}
// 导出组件
export default AboutView;
六,组件按需导入(懒加载):
用于 性能优化
。lazy
方法,subspense组件
1,定义懒加载组件router / LazyLoad.jsx
// 动态加载组件
import { lazy, Suspense } from "react";
// 动态加载组件 方法
function LazyLoad(url) {
// 配置动态加载组件路径
const Element = lazy(() => import(url));
return (
// 返回组件,Suspense:懒加载组件
<Suspense fallback={<h3>加载中. . . </h3>}>
{/* 内容组件 */}
<Element />
</Suspense>
);
}
// 导出方法
export default LazyLoad;
2,路由router / index.jsx
文件使用:
引入:
// 导入懒加载组件方法
import LazyLoad from "./LazyLoad";
使用:
element: LazyLoad("../views/HomeView")
router / index.jsx
文件 代码:
// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件,首页 关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";
// 创建路由
const routes = [
{
path: "/",
element: ("../views/HomeView")
},
{
path: "/about",
element: ("../views/AboutView")
},
{
path: "/product/:id",
element: ("../views/ProductView")
},
{
path: "/admin",
element: <Private><AdminView /></Private>,
// 配置子路由
children: [
{
path: "",
element: <DashView></DashView>
},
{
path: "orderlist",
element: <OrderList></OrderList>
}
]
},
];
// 使用useRoutes 创建
export default function RouterView() {
// 创建路由
const elem = useRoutes(routes);
// 返回接口
return elem;
}
效果图:
按需加载
七,路由权限:
类似于Vue里的路由守卫:未登陆 不能打开一些页面
有权限返回子组件,没有权限跳转到登录
1,定义权限组件router/Private.jsx
本地存储
有 token,就有权限,
没有token,就没有权限
import {Navigate} from "react-router-dom"
// 权限路由
function Private(props) {
if(localStorage.getItem("token")) {
return <>{props.children}</> ;
}else {
return <Navigate to="/" />
}
}
export default Private;
2,路由index . jsx文件使用:
权限组件包裹着 内容组件
element: < Private>< AdminView /></ Private>,
// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件,首页 关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";
import Private from "./Private";
import LazyLoad from "./LazyLoad";
// 创建路由
const routes = [
{
path: "/",
element: LazyLoad("../views/HomeView")
},
{
path: "/about",
element: LazyLoad("../views/AboutView")
},
{
path: "/product/:id",
element: LazyLoad("../views/ProductView")
},
{
path: "/admin",
element: <Private><AdminView /></Private>,
// 配置子路由
children: [
{
path: "",
element: <DashView></DashView>
},
{
path: "orderlist",
element: <OrderList></OrderList>
}
]
},
];
// 使用useRoutes 创建
export default function RouterView() {
// 创建路由
const elem = useRoutes(routes);
// 返回接口
return elem;
}
效果图:
八,设置404错误页面:
1,新建404组件文件 src / views / NoMatch.jsx
:
import { NavLink } from "react-router-dom"
function NoMatch() {
return (<div>
<h1>你的页面被😽偷走了!</h1>
<NavLink to="/">首页</NavLink>
</div>);
}
export default NoMatch;
2,路由配置,src / router / index.jsx
:
// 配置404页面
{
path: “*”,
element:
}
path 值为 *
// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件,首页 关于
import NoMatch from "../views/NoMatch";
import HomeView from "../views/HomeView";
// import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";
// 导入权限组件
import Private from "./Private";
// 导入懒加载组件方法
import LazyLoad from "./LazyLoad";
// 创建路由
const routes = [
{
path: "/",
element: LazyLoad("../views/HomeView")
},
{
path: "/about",
element: LazyLoad("../views/AboutView")
},
{
path: "/product/:id",
element: LazyLoad("../views/ProductView")
},
{
path: "/admin",
element: ( <Private><AdminView /></Private>),
// 配置子路由
children: [
{
path: "",
element: <DashView/>
},
{
path: "orderlist",
element: <OrderList/>
}
]
},
// 配置404页面
{
path: "*",
element: <NoMatch />
}
];
// 使用useRoutes 创建
export default function RouterView() {
// 创建路由
const elem = useRoutes(routes);
// 返回接口
return elem;
}
效果图:
总结:
路由组件与方法:
-
组件
< HashRouter> 哈希路由
< BrowserRouter> 浏览器路由
< NavLink> 导航链接
选中会有active 类名
< Link>导航链接
< OutLet>子路由容器 -
方法
useRoutes使用路由配置
useParams() 路由参数
useSearchParams() 获取查询参数文章来源:https://www.toymoban.com/news/detail-410798.html
文章来源地址https://www.toymoban.com/news/detail-410798.html
到了这里,关于React 路由react-router-dom详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!