React 路由react-router-dom詳解
( 路由嵌套 + 路由傳參 + 路由權(quán)限 + 路由優(yōu)化 按需導(dǎo)入 + 404頁(yè)面 )
前面我們先了解一下 路由是什么？ 路由分類有哪些？?jī)?nèi)置API有哪些？可能有點(diǎn)枯燥，不喜歡看的直接跳過！
1，相關(guān)理解
- 單頁(yè)Web應(yīng)用（single page web application，SPA）。
- 整個(gè)應(yīng)用只有一個(gè)完整的頁(yè)面。
- 點(diǎn)擊頁(yè)面中的鏈接不會(huì)刷新頁(yè)面，只會(huì)做頁(yè)面的局部更新。
- 數(shù)據(jù)都需要通過ajax請(qǐng)求獲取, 并在前端異步展現(xiàn)。
2，路由的理解：
1. 什么是路由?
- 一個(gè)路由就是一個(gè)映射關(guān)系(key:value)
- key為路徑, value可能是function或component
2，react-router-dom的理解：
- react的一個(gè)插件庫(kù)。
- 專門用來實(shí)現(xiàn)一個(gè)SPA應(yīng)用。
- 基于react的項(xiàng)目基本都會(huì)用到此庫(kù)。
一，基本路由使用：
先看看效果：
1，下載安裝：
-
win + R
-
cmd 打開
-
cd/react項(xiàng)目文件目錄
-
安裝：
npm i react-router-dom -S
很好，你已經(jīng)完成了，安裝！
二， 接下來是使用路由的步驟
文件
1， 創(chuàng)建頁(yè)面
在
src路徑下新建views文件，頁(yè)面組件新建在這里面
2，新建路由文件
在
src路徑下新建router文件夾，在這里配置路由
3，配置路由文件：
在
router路徑下新建index.jsx文件夾，在這里配置路由
- 導(dǎo)入路由依賴
// 導(dǎo)入路由依賴
import { useRoutes } from "react-router-dom";
- 導(dǎo)入所需組件，首頁(yè) 關(guān)于
// 導(dǎo)入所需組件，首頁(yè) 關(guān)于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
- 創(chuàng)建路由
// 創(chuàng)建路由
const routes = [
{
path: "/",
element: (<HomeView></HomeView>)
},
{
path: "/about",
element: (<AboutView ></AboutView >)
},
];
- 使用useRoutes 創(chuàng)建，導(dǎo)出路由
// 使用useRoutes 創(chuàng)建
export default function RouterView() {
// 創(chuàng)建路由
const elem = useRoutes(routes);
// 返回接口
return elem;
}
完整代碼：
以上配置是路由
基礎(chǔ)配置：
這樣還是看不到效果的，要配置導(dǎo)航使用路由
4，使用并切換路由，配置App.jsx文件：
路徑：src / App.jsx
- 導(dǎo)入：
import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom";
Router： 路由
RouterView： 路由組件 ，導(dǎo)入路由文件
HashRouter： 哈希路由
NavLink： 導(dǎo)航鏈接
- 使用，配置導(dǎo)航鏈接，這里使用 函數(shù)組件：
全部代碼：
import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom";
function App() {
return (
<Router>
<NavLink to="/">首頁(yè)</NavLink>  || 
<NavLink to="/about">關(guān)于</NavLink>  || 
<RouterView />
</Router>
);
}
export default App;
- 效果圖：
三， 路由傳參：
1，路由文件配置：
2，組件使用：
ProductView.jsx文件配置：
- 引入useParams
這里我新建了一個(gè)組件 ProductView.jsx
import { useParams } from "react-router-dom"
- 獲取參數(shù)
const { id } = useParams()
- 渲染參數(shù)：
<h1>產(chǎn)品參數(shù)：{id}</h1>
ProductView.jsx 文件代碼：
App.jsx 文件配置：
傳參：
<NavLink to="/product/123">產(chǎn)品123</NavLink>  || 
<NavLink to="/product/456">產(chǎn)品456</NavLink>  || 
App.jsx 文件代碼：
效果：
四， 路由嵌套：
- 路由文件配置：
src / router / index.jsx
// 導(dǎo)入路由依賴
import { useRoutes } from "react-router-dom";
// 導(dǎo)入所需組件，首頁(yè) 關(guān)于
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";
// 創(chuàng)建路由
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 創(chuàng)建
export default function RouterView() {
// 創(chuàng)建路由
const elem = useRoutes(routes);
// 返回接口
return elem;
}
- 組件文件配置：
新建文件 以下圖：
views / AdminView.jsx文件：
import { NavLink, Outlet } from "react-router-dom";
function AdminView() {
return (
<div>
<h3>管理頁(yè)面</h3>
<NavLink to="">管理頁(yè)面</NavLink> || 
<NavLink to="orderlist">概覽頁(yè)面</NavLink>
<Outlet />
</div>
);
}
export default AdminView;
NavLink ：導(dǎo)航鏈接
Outlet： 子組件容器
views / DashView.jsx文件：
function DashView() {
return ( <div>
<h3>概覽頁(yè)面內(nèi)容</h3>
</div> );
}
export default DashView;
views / OrderList.jsx文件：
function OrderList() {
return (<div>
<h3>管理頁(yè)面內(nèi)容</h3>
</div>);
}
export default OrderList;
效果圖：
五， 路由查詢參數(shù)：
1， App.jsx文件 導(dǎo)航配置：
代碼：
import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom"
function App() {
return (<Router>
<NavLink to="/">首頁(yè)</NavLink >  || 
<NavLink to="/about">關(guān)于</NavLink>  || 
<NavLink to="/admin">admin頁(yè)面</NavLink>  || 
<NavLink to="/product/123">產(chǎn)品123</NavLink>  || 
<NavLink to="/product/456">產(chǎn)品456</NavLink>  || 
<NavLink to="/about?redirect=hello">產(chǎn)品hello</NavLink>  || 
<NavLink to="/about?redirect=word">產(chǎn)品word</NavLink>  || 
<RouterView></RouterView>
</Router>);
}
export default App;
傳參：?redirect= “ 傳的查詢參數(shù) ”
2，AboutView.jsx 文件：
代碼：
import { useSearchParams, NavLink, useNavigate, useLocation } from "react-router-dom"
function AboutView() {
// 獲取about查詢參數(shù)redirect的值
const [SearchParams] = useSearchParams()
// 獲取redirect的值
const redirect = SearchParams.get('redirect')
// 渲染
return (<div>
{/* // 傳遞查詢參數(shù) */}
<h1>About頁(yè)面查詢參數(shù)：-{redirect}</h1>
</div>);
}
// 導(dǎo)出組件
export default AboutView;
六，組件按需導(dǎo)入（懶加載）：
用于 性能優(yōu)化。lazy方法，subspense組件
1，定義懶加載組件router / LazyLoad.jsx
// 動(dòng)態(tài)加載組件
import { lazy, Suspense } from "react";
// 動(dòng)態(tài)加載組件 方法
function LazyLoad(url) {
// 配置動(dòng)態(tài)加載組件路徑
const Element = lazy(() => import(url));
return (
// 返回組件，Suspense:懶加載組件
<Suspense fallback={<h3>加載中. . . </h3>}>
{/* 內(nèi)容組件 */}
<Element />
</Suspense>
);
}
// 導(dǎo)出方法
export default LazyLoad;
2，路由router / index.jsx文件使用：
引入：
// 導(dǎo)入懶加載組件方法
import LazyLoad from "./LazyLoad";
使用：
element: LazyLoad("../views/HomeView")
router / index.jsx文件 代碼：
// 導(dǎo)入路由依賴
import { useRoutes } from "react-router-dom";
// 導(dǎo)入所需組件，首頁(yè) 關(guān)于
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";
// 創(chuàng)建路由
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 創(chuàng)建
export default function RouterView() {
// 創(chuàng)建路由
const elem = useRoutes(routes);
// 返回接口
return elem;
}
效果圖：
按需加載
七，路由權(quán)限：
類似于Vue里的路由守衛(wèi)：未登陸 不能打開一些頁(yè)面
有權(quán)限返回子組件，沒有權(quán)限跳轉(zhuǎn)到登錄
1，定義權(quán)限組件router/Private.jsx
本地存儲(chǔ)
有 token，就有權(quán)限，沒有token，就沒有權(quán)限
import {Navigate} from "react-router-dom"
// 權(quán)限路由
function Private(props) {
if(localStorage.getItem("token")) {
return <>{props.children}</> ;
}else {
return <Navigate to="/" />
}
}
export default Private;
2，路由index . jsx文件使用：
權(quán)限組件包裹著 內(nèi)容組件
element: < Private>< AdminView /></ Private>,
// 導(dǎo)入路由依賴
import { useRoutes } from "react-router-dom";
// 導(dǎo)入所需組件，首頁(yè) 關(guān)于
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";
// 創(chuàng)建路由
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 創(chuàng)建
export default function RouterView() {
// 創(chuàng)建路由
const elem = useRoutes(routes);
// 返回接口
return elem;
}
效果圖：
八，設(shè)置404錯(cuò)誤頁(yè)面：
1，新建404組件文件 src / views / NoMatch.jsx :
import { NavLink } from "react-router-dom"
function NoMatch() {
return (<div>
<h1>你的頁(yè)面被??偷走了!</h1>
<NavLink to="/">首頁(yè)</NavLink>
</div>);
}
export default NoMatch;
2，路由配置，src / router / index.jsx :
// 配置404頁(yè)面
{
path: “*”,
element:
}
path 值為 *
// 導(dǎo)入路由依賴
import { useRoutes } from "react-router-dom";
// 導(dǎo)入所需組件，首頁(yè) 關(guān)于
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";
// 導(dǎo)入權(quán)限組件
import Private from "./Private";
// 導(dǎo)入懶加載組件方法
import LazyLoad from "./LazyLoad";
// 創(chuàng)建路由
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頁(yè)面
{
path: "*",
element: <NoMatch />
}
];
// 使用useRoutes 創(chuàng)建
export default function RouterView() {
// 創(chuàng)建路由
const elem = useRoutes(routes);
// 返回接口
return elem;
}
效果圖：
總結(jié)：
路由組件與方法：
-
組件
< HashRouter> 哈希路由
< BrowserRouter> 瀏覽器路由
< NavLink> 導(dǎo)航鏈接
選中會(huì)有active 類名
< Link>導(dǎo)航鏈接
< OutLet>子路由容器 -
方法
useRoutes使用路由配置
useParams() 路由參數(shù)
useSearchParams() 獲取查詢參數(shù)文章來源：http://www.zghlxwxcb.cn/news/detail-410798.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-410798.html
到了這里，關(guān)于React 路由react-router-dom詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
