首页 > 其他分享 >React - React Router

React - React Router

时间:2024-04-02 12:44:39浏览次数:26  
标签:router React RouterProvider import 组件 Router 路由 页面

安装

pnpm i react-router-dom

布局

布局组件用于定义应用程序的整体布局结构,决定如何将匹配的子路由渲染到指定的位置(通过 <Outlet />)。

file:[src/layouts/index.js]
import { Outlet, Link } from "react-router-dom";

export default function Layout() {
  return (
    <div>
      {/* 导航栏,包含两个链接 */}
      <div>
        <Link to="/">关于</Link> {/* 导航到主页 */}
        <Link to="/board">面板</Link> {/* 导航到面板页面 */}
      </div>
      {/* 渲染子路由 */}
      <div>
        <Outlet /> {/* 这里将会渲染匹配的子路由 */}
      </div>
    </div>
  );
}

配置

创建了一个基于哈希的路由配置,其中包含了根路径 / 和其他路径 /login/article 的路由规则。根路径下使用 Layout 组件作为布局,包含了默认子路由 /about/board。其他路径分别对应不同的页面组件。最后,通过 export 将路由实例 router 和路由提供者组件 RouterProvider 导出,以便在应用中使用。

file:[src/router/index.js]
import { createHashRouter, RouterProvider } from "react-router-dom";
import Layout from "../layouts"; // 导入布局组件
import About from "../pages/About"; // 导入关于页面组件
import Board from "../pages/Board"; // 导入面板页面组件
import Login from "../pages/Login"; // 导入登录页面组件
import Article from "../pages/Article"; // 导入文章页面组件

// 创建 hash 路由
const router = createHashRouter([
  {
    path: "/", // 根路径
    // Layout 组件作为根路由的布局
    element: <Layout />, // 使用 Layout 组件
    children: [
      {
        index: true, // 当前为根路由的默认子路由
        element: <About />, // 渲染关于页面组件
      },
      {
        path: "board", // 面板页面的路径
        element: <Board />, // 渲染面板页面组件
      },
    ],
  },
  {
    path: "/login", // 登录页面的路径
    element: <Login />, // 渲染登录页面组件
  },
  {
    path: "/article", // 文章页面的路径
    element: <Article />, // 渲染文章页面组件
  },
]);

export { router, RouterProvider }; // 导出路由和 RouterProvider 组件

使用 <RouterProvider> 组件提供了路由信息给应用,并将 router 路由实例作为参数传递给了 RouterProvider 组件。

file:[src/index.js]
import React from "react";
import ReactDOM from "react-dom/client"; // 引入 ReactDOM 的 createRoot 方法
import "./index.css";
import App from "./App"; // 引入应用主组件
import reportWebVitals from "./reportWebVitals";
import { RouterProvider, router } from "./router"; // 引入路由提供者和路由实例

// 创建根容器
const root = ReactDOM.createRoot(document.getElementById("root")); // 使用 createRoot 方法创建根容器

// 渲染应用
root.render(
  <React.StrictMode>
    {/* 使用 RouterProvider 提供路由信息给应用 */}
    <RouterProvider router={router}>
      <App /> {/* 应用主组件 */}
    </RouterProvider>
  </React.StrictMode>
);

reportWebVitals(); // 上报 Web 性能指标

标签:router,React,RouterProvider,import,组件,Router,路由,页面
From: https://www.cnblogs.com/Himmelbleu/p/18110332

相关文章

  • 在React中实现图片懒加载
    在React中实现图片懒加载,可以使用第三方库,如react-lazy-load。以下是一个简单的例子,使用react-lazy-load实现图片懒加载。首先,安装react-lazy-load-image-component库:bashnpminstallreact-lazy-load-image-component然后,在React组件中使用:jsximportReactfrom'react';impo......
  • react-lazy-load-image-component
    react-lazy-load-image-component1.6.0 • Public • Published 10monthsago ReadmeCode Beta2Dependencies343Dependents30VersionsReactLazyLoadImageComponentReactComponenttolazyloadimagesandothercomponents/elements.SupportsI......
  • 【雷达】测量聚变 React堆中等离子体的FMCW雷达和相关DSP模型matlab代码
     ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,代码获取、论文复现及科研仿真合作可私信。......
  • react防抖节流
    防抖importReact,{useState,useEffect}from'react';constDebounceExample=()=>{const[inputValue,setInputValue]=useState('');useEffect(()=>{constdelay=1000;//设置防抖延迟时间为1秒consttimer=setTimeou......
  • 报错:react.development.js:1130 Uncaught Error: Objects are not valid as a React
      原因:是因为getControl我用了异步async的方法。而调用的时候,没有加上await导致的。 解决办法:加上await就可以了 ......
  • Cisco ASR 1000 Router IOS XE Software Release Dublin-17.12.3 ED
    CiscoASR1000RouterIOSXESoftwareReleaseDublin-17.12.3EDCiscoASR1000SeriesAggregationServicesRouters请访问原文链接:https://sysin.org/blog/cisco-asr-1000/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org思科ASR1000系列聚合服务路由器Re......
  • vue-router
    [什么是vue-router]传统的路由是针对服务器不同文件,这样路由的变动就会导致新页面加载,导致页面刷新。vue-router实现了在vue组件基础上,不加载页面文件,而是更改部分页面组件的方式来展现不同路由时显示的内容。同时节约了客户端和服务端资源。[安装]npmivue-router@4......
  • 使用React 18和WebSocket构建实时通信功能
    1.引言WebSocket是一种在Web应用中实现双向通信的协议。它允许服务器主动向客户端推送数据,而不需要客户端发起请求。在现代的实时应用中,WebSocket经常用于实时数据传输、聊天功能、实时通知和多人协作等场景。在本篇博客中,我们将探索如何在React18应用中使用WebSocket来......
  • 从虚拟dom知识无痛深入vue与react的原理
     我们都知道像vue、react都有用到虚拟dom,那么虚拟dom到底是什么?框架为什么不直接操作真实dom而要在中间要引入虚拟dom呢?vue和react的虚拟dom又有什么异同呢?我们就从虚拟dom开始讲起,再来逐步引入讲解vue与react的部分原理及其异同,这里会顺便讲解到数据驱动视图及视图驱动数据,......
  • React Native简介和环境配置,差点挂在第四面
    ReactNative目前需要NodeJS5.0或更高版本。本文发布时Homebrew默认安装的是最新版本,一般都满足要求。brewinstallnode安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!npmconfig......