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