React Router是React应用中最流行的路由库,它允许您在不同组件间根据URL进行导航,提供单页面应用(SPA)体验,无需重新加载整个页面即可更新内容。React Router v6是最新主要版本,相比前版,它带来了诸多改进、简化和新功能。
简化的API
路由元素(element
属性)
element
属性而非component
或render
属性。这允许直接传递组件进行渲染。component={ComponentName}
element={<ComponentName />}
路由匹配
<Switch>
组件被<Routes>
替换,只渲染与URL匹配的第一个路由。嵌套路由
element
属性定义嵌套路由,无需使用渲染函数或子元素嵌套。精确匹配默认化
exact
属性指定精确匹配。React Router Hook
useNavigate
、useParams
、useLocation
、useMatch
和useResolvedPath
。要开始使用React Router v6,请按以下步骤操作:
您可以使用npm或yarn安装React Router v6:
npm install react-router-dom@6
# 或
yarn add react-router-dom@6
下面是一个React Router v6中基本路由配置示例:
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';
const App = () => {
return (
<Router>
<Routes>
<Route element={<Home />} path="/" />
<Route element={<About />} path="/about" />
<Route element={<NotFound />} path="*" />
</Routes>
</Router>
);
};
export default App;
<Routes>
: 取代了旧版本中的<Switch>
组件,确保只渲染第一个匹配的路由。<Route element={<Home />} path="/" />
: 定义主页路由并渲染Home组件。Home.js
import React from 'react';
const Home = () => {
return <h2>主页</h2>;
};
export default Home;
About.js
import React from 'react';
const About = () => {
return <h2>关于我们</h2>;
};
export default About;
NotFound.js
import React from 'react';
const NotFound = () => {
return <h2>页面未找到</h2>;
};
export default NotFound;
为了处理动态路由,例如URL中包含用户ID的用户信息页面,React Router v6提供useParams
Hook。
import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';
const UserProfile = () => {
const { userId } = useParams(); // 从URL中提取userId
return <h2>用户ID:{userId} 的用户信息</h2>;
};
const App = () => {
return (
<Routes>
<Route element={<UserProfile />} path="/user/:userId" />
</Routes>
);
};
export default App;
:userId
是路由路径中的动态片段。useParams
Hook允许您访问UserProfile
组件中的userId
值。/user/123
时,UserProfile
组件将渲染并显示userId
为123。嵌套路由允许您在父路由中定义子路由,构建复杂的布局。
import React from 'react';
import { Routes, Route } from 'react-router-dom';
const Dashboard = () => {
return (
<div>
<h2>仪表盘</h2>
<Routes>
<Route element={<Overview />} path="overview" />
<Route element={<Settings />} path="settings" />
</Routes>
</div>
);
};
const Overview = () => <h3>概览页面</h3>;
const Settings = () => <h3>设置页面</h3>;
const App = () => {
return (
<Routes>
<Route element={<Dashboard />} path="/dashboard/*" />
</Routes>
);
};
export default App;
Dashboard
组件包含用于概览和设置的嵌套路由。/*
确保所有子路由都在/dashboard
下处理。React Router v6引入了几个Hook用于导航和访问路由信息:
useNavigate
: 以编程方式导航到不同的路由。useParams
: 访问动态URL参数。useLocation
: 获取关于当前位置(URL)的信息。useMatch
: 将当前URL与给定路由匹配。useResolvedPath
: 将路径解析为绝对URL。useNavigate
HookuseNavigate
Hook允许在应用中进行编程导航。
import React from 'react';
import { useNavigate } from 'react-router-dom';
const RedirectToAbout = () => {
const navigate = useNavigate();
const goToAboutPage = () => {
navigate('/about'); // 以编程方式导航到关于页面
};
return (
<div>
<button onClick={goToAboutPage}>跳转到关于页面</button>
</div>
);
};
export default RedirectToAbout;
exact
属性,简化路由匹配。element
属性: 将JSX直接传递给element
属性,而非component
属性,简化代码,减少对渲染函数的需求。*
捕获所有不匹配的路由并显示404页面或将用户重定向到默认路由。React Router v6相比前版有诸多改进,包括更简单的API、更好的路由匹配以及对动态和嵌套路由的增强支持。通过利用useNavigate
、useParams
和useLocation
等Hook,您可以在React应用中构建强大且灵活的路由系统。