React Router 基础教程
React Router 是一个功能强大的库，用于在 React 应用中实现路由功能。它允许开发者定义应用内的路由，并管理不同视图或组件间的导航。通过处理动态路由和基于 URL 的导航，React Router 简化了单页应用 (SPA) 的创建。
React Router 核心概念
- 路由 (Route): 应用内从一个 URL 导航到另一个 URL 的过程。
- 单页应用 (SPA): React Router 专为 SPA 设计，应用只加载一次，用户导航时只更新部分页面内容。
React Router 核心组件
-
BrowserRouter (或 HashRouter):
- 用于管理路由逻辑的容器组件，启用导航功能。
-
BrowserRouter使用 HTML5 History API 操作浏览器 URL 并保持 UI 同步。 - 对于不支持 HTML5 History API 的旧浏览器，可以使用
HashRouter(基于哈希的路由)。
示例:
import { BrowserRouter } from 'react-router-dom';
const App = () => {
return (
-
Routes:
- 定义应用内所有路由的容器组件。在 React Router v6 中，
Routes替代了之前的Switch组件。
- 定义应用内所有路由的容器组件。在 React Router v6 中，
示例:
import { Routes, Route } from 'react-router-dom';
const RoutesComponent = () => {
return (
);
};
-
Route:
- 定义 URL 路径与组件之间的映射关系。
-
path属性指定 URL 路径，element属性指定匹配时渲染的组件。
示例:
} />
-
Link:
- 用于在不同路由间导航，无需页面重新加载。它渲染一个
标签，响应点击事件并更新浏览器 URL。
- 用于在不同路由间导航，无需页面重新加载。它渲染一个
示例:
import { Link } from 'react-router-dom';
const Navigation = () => {
return (
);
};
-
useNavigate:
- 钩子函数，用于以编程方式导航到不同的路由。通常用于事件处理程序或副作用中。
示例:
import { useNavigate } from 'react-router-dom';
const Login = () => {
const navigate = useNavigate();
const handleLogin = () => {
// 登录逻辑
navigate('/dashboard');
};
return ;
};
基本路由示例
一个在函数式 React 应用中演示 React Router 基本用法的示例：
import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
const Home = () => 主页
;
const About = () => 关于页
;
const Contact = () => 联系页
;
const App = () => {
return (
);
};
export default App;
说明:
-
BrowserRouter组件包裹整个应用以启用路由。 -
Link组件创建不会触发页面重新加载的导航链接。 -
Routes组件包含所有路由，每个Route元素将 URL 路径映射到组件 (例如，Home、About或Contact)。 - 点击链接会更新 URL 并渲染相应的组件。
嵌套路由
React Router 也支持嵌套路由，允许在其他路由内定义路由。
// ... (省略部分代码，与上一个示例类似) const Dashboard = () => (); const App = () => { return (仪表盘
个人资料页面} /> 设置页面} /> ); }; // ... (省略部分代码) } /> } />
说明:
-
/dashboard路由有嵌套路由：/dashboard/profile和/dashboard/settings。 - 通过在父路由中使用
*通配符 (path="/dashboard/*")，React Router 知道在Dashboard组件内部渲染子路由。
使用 useNavigate 重定向
可以使用 useNavigate 钩子以编程方式将用户重定向到不同的路由。
import { useNavigate } from 'react-router-dom';
const RedirectComponent = () => {
const navigate = useNavigate();
// 将用户重定向到另一个路由
navigate('/about');
return null; // 返回 null 避免渲染任何内容
};
说明:
-
RedirectComponent组件渲染时会自动将用户重定向到/about路由。
路由参数
通过包含路由参数定义动态路由，这些参数可以在 URL 中传递值。
import React from 'react';
import { BrowserRouter, Routes, Route, useParams } from 'react-router-dom';
const UserProfile = () => {
const { userId } = useParams();
return 用户资料：{userId}
;
};
const App = () => {
return (
);
};
export default App;
说明:
- 路由路径中的
:userId是一个路由参数。 -
useParams钩子在UserProfile组件内部使用，从 URL 中提取userId的值并在页面上显示。
总结
React Router 简化了 React 应用中视图间导航，提高了效率。BrowserRouter、Route、Link 等组件以及 useNavigate 等钩子，可以创建具有复杂路由逻辑的动态单页应用。掌握 React Router 基础知识，包括路由处理、嵌套路由和路由参数，可以轻松管理 React 应用的导航。
