React 路由react-router-dom示例詳解

更新時間：2024年01月26日 11:23:47 作者：邢帥兵_

一個路由就是一個映射關(guān)系(key:value),key為路徑, value可能是function或component,本文給大家介紹React 路由react-router-dom詳解,感興趣的朋友跟隨小編一起看看吧

React 路由react-router-dom詳解

( 路由嵌套 + 路由傳參 + 路由權(quán)限 + 路由優(yōu)化按需導入 + 404頁面 )

前面我們先了解一下路由是什么？路由分類有哪些？內(nèi)置API有哪些？
可能有點枯燥，不喜歡看的直接跳過！

1，相關(guān)理解

單頁Web應用（single page web application，SPA）。整個應用只有一個完整的頁面。點擊頁面中的鏈接不會刷新頁面，只會做頁面的局部更新。數(shù)據(jù)都需要通過ajax請求獲取, 并在前端異步展現(xiàn)。

2，路由的理解：

1. 什么是路由?

一個路由就是一個映射關(guān)系(key:value)key為路徑, value可能是function或component

2，react-router-dom的理解：

react的一個插件庫。專門用來實現(xiàn)一個SPA應用?；趓eact的項目基本都會用到此庫。

一，基本路由使用：先看看效果：

1，下載安裝：

win + R

cmd 打開

cd/react項目文件目錄

安裝：

 npm  i react-router-dom -S

很好，你已經(jīng)完成了，安裝！

二，接下來是使用路由的步驟

文件

1，創(chuàng)建頁面

在 src路徑下新建views文件，頁面組件新建在這里面

2，新建路由文件

在 src路徑下 新建router文件夾，在這里配置路由

3，配置路由文件：

在 router路徑下 新建index.jsx文件夾，在這里配置路由

導入路由依賴

// 導入路由依賴
import { useRoutes } from "react-router-dom";

導入所需組件，首頁關(guān)于

// 導入所需組件，首頁  關(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)建，導出路由

// 使用useRoutes 創(chuàng)建
export default function RouterView() {
  // 創(chuàng)建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}

完整代碼：

以上配置是路由基礎(chǔ)配置：
這樣還是看不到效果的，要配置導航使用路由

4，使用并切換路由，配置App.jsx文件：

路徑：src / App.jsx

導入：

import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom";

Router： 路由

RouterView： 路由組件，導入路由文件

HashRouter： 哈希路由

NavLink： 導航鏈接

使用，配置導航鏈接，這里使用函數(shù)組件：

全部代碼：

import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom";
function App() {
  return (
    <Router>
      <NavLink to="/">首頁</NavLink> &emsp;||&emsp;
      <NavLink to="/about">關(guān)于</NavLink> &emsp;||&emsp;
      <RouterView />
    </Router>
  );
}
export default App;

效果圖：

三，路由傳參：

1，路由文件配置：

2，組件使用： ProductView.jsx文件配置：引入useParams

這里我新建了一個組件 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> &emsp;||&emsp;
<NavLink to="/product/456">產(chǎn)品456</NavLink> &emsp;||&emsp;

App.jsx 文件代碼：

效果：

四，路由嵌套：

路由文件配置：src / router / index.jsx

// 導入路由依賴
import { useRoutes } from "react-router-dom";
// 導入所需組件，首頁  關(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>管理頁面</h3>
      <NavLink to="">管理頁面</NavLink>&emsp;||&emsp;
      <NavLink to="orderlist">概覽頁面</NavLink>
      <Outlet />
    </div>
  );
}
export default AdminView;

NavLink ：導航鏈接
Outlet：子組件容器

views / DashView.jsx文件：

function DashView() {
    return ( <div>
        <h3>概覽頁面內(nèi)容</h3>
    </div> );
}
export default DashView;

views / OrderList.jsx文件：

function OrderList() {
    return (<div>
        <h3>管理頁面內(nèi)容</h3>
    </div>);
}
export default OrderList;

效果圖：

五，路由查詢參數(shù)：

1， App.jsx文件導航配置：

代碼：

import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom"
function App() {
    return (<Router>
        <NavLink to="/">首頁</NavLink >  &emsp;||&emsp;
        <NavLink to="/about">關(guān)于</NavLink> &emsp;||&emsp;
        <NavLink to="/admin">admin頁面</NavLink> &emsp;||&emsp;
        <NavLink to="/product/123">產(chǎn)品123</NavLink> &emsp;||&emsp;
        <NavLink to="/product/456">產(chǎn)品456</NavLink> &emsp;||&emsp;
        <NavLink to="/about?redirect=hello">產(chǎn)品hello</NavLink> &emsp;||&emsp;
        <NavLink to="/about?redirect=word">產(chǎn)品word</NavLink> &emsp;||&emsp;
        <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頁面查詢參數(shù)：-{redirect}</h1>
    </div>);
}
// 導出組件
export default AboutView;

六，組件按需導入（懶加載）：

用于性能優(yōu)化。
lazy方法， subspense組件

1，定義懶加載組件router / LazyLoad.jsx

// 動態(tài)加載組件
import { lazy, Suspense } from "react";
// 動態(tài)加載組件 方法
function LazyLoad(url) {
  // 配置動態(tài)加載組件路徑
  const Element = lazy(() => import(url));
  return (
    // 返回組件，Suspense:懶加載組件
    <Suspense fallback={<h3>加載中. . . </h3>}>
      {/* 內(nèi)容組件 */}
      <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";
// 導入所需組件，首頁  關(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)：未登陸不能打開一些頁面
有權(quán)限返回子組件，沒有權(quán)限跳轉(zhuǎn)到登錄

1，定義權(quán)限組件router/Private.jsx

本地存儲有 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>,

// 導入路由依賴
import { useRoutes } from "react-router-dom";
// 導入所需組件，首頁  關(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;
}

效果圖：

八，設置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";
// 導入所需組件，首頁  關(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";
// 導入權(quán)限組件
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/>
      },
      {
        path: "orderlist",
        element: <OrderList/>
      }
    ]
  },
  // 配置404頁面
  {
    path: "*",
    element: <NoMatch />
  }
];
// 使用useRoutes 創(chuàng)建
export default function RouterView() {
  // 創(chuàng)建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}

效果圖：

總結(jié)：

路由組件與方法：

組件

< HashRouter> 哈希路由
< BrowserRouter> 瀏覽器路由
< NavLink> 導航鏈接
選中會有active 類名
< Link>導航鏈接
< OutLet>子路由容器

方法

useRoutes使用路由配置
useParams() 路由參數(shù)
useSearchParams() 獲取查詢參數(shù)

到此這篇關(guān)于React 路由react-router-dom詳解的文章就介紹到這了,更多相關(guān)React 路由react-router-dom內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React 路由react-router-dom示例詳解

目錄

React 路由react-router-dom詳解

1，相關(guān)理解

2，路由的理解：

1. 什么是路由?

2，react-router-dom的理解：

一，基本路由使用：先看看效果：

1，下載安裝：

二，接下來是使用路由的步驟

1，創(chuàng)建頁面

2，新建路由文件

3，配置路由文件：

4，使用并切換路由，配置App.jsx文件：

三，路由傳參：

1，路由文件配置：

2，組件使用： ProductView.jsx文件配置：引入useParams

四，路由嵌套：

五，路由查詢參數(shù)：

六，組件按需導入（懶加載）：

七，路由權(quán)限：

八，設置404錯誤頁面：

總結(jié)：

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React 路由react-router-dom示例詳解

目錄

React 路由react-router-dom詳解

1，相關(guān)理解

2，路由的理解：

1. 什么是路由?

2，react-router-dom的理解：

一，基本路由使用： 先看看效果：

1，下載安裝：

二， 接下來是使用路由的步驟

1， 創(chuàng)建頁面

2，新建路由文件

3，配置路由文件：

4，使用并切換路由，配置App.jsx文件：

三， 路由傳參：

1，路由文件配置：

2，組件使用： ProductView.jsx文件配置： 引入useParams

四， 路由嵌套：

五， 路由查詢參數(shù)：

六，組件按需導入（懶加載）：

七，路由權(quán)限：

八，設置404錯誤頁面：

總結(jié)：

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

1，相關(guān)理解

2，react-router-dom的理解：

一，基本路由使用：先看看效果：

二，接下來是使用路由的步驟

1，創(chuàng)建頁面

2，新建路由文件

3，配置路由文件：

4，使用并切換路由，配置App.jsx文件：

三，路由傳參：

1，路由文件配置：

2，組件使用： ProductView.jsx文件配置：引入useParams

四，路由嵌套：

五，路由查詢參數(shù)：

七，路由權(quán)限：

八，設置404錯誤頁面：