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

React 18.2中采用React Router 6.4

React 18.2中采用React Router 6.4

一、安装 React Router v6

在项目根目录下运行:

npm install react-router-dom@6.4

二、基本用法 —— 配置路由

1. 基本的路由设置(使用 BrowserRouter)

在 React 18 中,通常你会在 src/main.jsx或 src/index.js中渲染你的 App 组件,并用 <BrowserRouter>包裹整个应用。

​​src/main.jsx(或 src/index.js)​

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);

2. 在 App 组件中配置路由(使用 <Routes>和 <Route>)

src/App.jsx​

import { Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';
function App() {
return (
{/* 导航栏 */}
首页 |
关于
{/* 路由配置 */}
} />
} />
{/* 404 页面,匹配所有未定义的路由 */}
} />
);
}
export default App;

3. 创建页面组件

在 src/pages/目录下创建对应的页面组件,例如:

​​src/pages/Home.jsx​

function Home() {
return 欢迎来到首页;
}
export default Home;

src/pages/About.jsx​

function About() {
return 这是关于页面;
}
export default About;

src/pages/NotFound.jsx​

function NotFound() {
return 404 - 页面未找到;
}
export default NotFound;

三、<Outlet />

用于在​​父路由组件​​中预留一个位置,用来​​渲染其子路由匹配到的组件​。

可以把 <Outlet />想象成:一个插槽(slot),子路由的组件会“插入”到这个插槽中显示。​

或者:

父组件说:“我负责整体布局,但中间这部分内容由你来决定(即子路由),你就放在 <Outlet />这个位置吧!”

四、编程式导航(使用 useNavigate)

在函数组件中,可以使用 useNavigate进行编程式跳转:

import { useNavigate } from 'react-router-dom';
function LoginButton() {
const navigate = useNavigate();
const handleLogin = () => {
// 模拟登录逻辑...
navigate('/dashboard'); // 跳转到 dashboard
};
return ;
}

五、获取路由参数(如:/dashboard/:id)

// Route 配置
} />
// UserProfile.jsx
import { useParams } from 'react-router-dom';
function UserProfile() {
const { userId } = useParams();
return 用户ID: {userId};
}

注意,是:path="users/:userId",不是path="/users/:userId"。

六、结合 React.lazy 和 Suspense 实现​​按需加载(懒加载)路由

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
function App() {
return (
加载中...}>
} />
} />
);
}

http://www.hskmm.com/?act=detail&tid=15641

相关文章:

  • 题解:AT_abc257_h [ABC257Ex] Dice Sum 2
  • ClickHouse UPDATE 机制详解 - 若
  • ClickHouse index_granularity 详解 - 若
  • P13885 [蓝桥杯 2023 省 Java/Python A] 反异或 01 串
  • clickhouse轻量级更新 - 若
  • 西电PCB设计指南第3章学习笔记
  • Vitrualbox、kali、metaspolitable2下载安装
  • LazyLLM端到端实战:用RAG+Agent实现自动出题与学习计划的个性化学习助手智能体
  • 补充图
  • 【阿里云事件总线】域名+邮件推送+事件总线=实现每天定时邮件!
  • llm入门环境
  • FLASH空间划分/存储数据至指定CODEFLASH位置
  • SOOMAL 降噪数据表
  • 案例分享|借助IronPDF IronOCR,打造医疗等行业的智能化解决方案
  • ClickHouse UPDATE 操作问题解决方案 - 若
  • 利用 Milvus + RustFS,快速打造一个 RAG!
  • Docker 私有镜像仓库 Harbor 安装部署带签名认证
  • ARC180 做题记
  • 借助Aspose.HTML控件,使用 Python 编辑 HTML
  • 微前端 micro-app 在vue 中的路由跳转问题
  • 1. 设计模式--工厂办法模式
  • 汽车视频总线采集过程中,如何兼顾响应速度和可靠性?
  • P8865 [NOIP2022] 种花
  • traefik 反向代理 + IdentityServer4
  • 麦角硫因制备关键技术和设备
  • 2025年十大好用网盘推荐:功能、口碑与性价比大对比
  • 卡特兰数
  • Word-通过宏格式化文档中的表格和图片
  • 反向代理 traefik - 健康检查
  • 一些想法 - CelestialZ