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