React-Router 简单实践概览
前言
在 React 应用开发中，路由管理是构建单页应用（SPA）不可或缺的部分。React-Router 作为 React 生态系统中最流行的路由解决方案之一，为开发者提供了强大且灵活的路由功能。今天，让我们看看 React-Router 在实际项目中的简单应用。
安装React-Router（作为依赖）
npx create-vite@latest
npm i react-router
整体架构
<BrowserRouter>
React-Router 中，<BrowserRouter> 是应用的基础容器，它使用 HTML5 的 history API 来管理 URL 变化，让应用拥有像原生浏览器导航一样的体验。它在整个路由体系中起到了包裹全局路由的作用，是路由功能正常运作的基石。
<Routes>
作为路由的容器组件，负责组织和管理多个 <Route> 组件，它会根据当前 URL 匹配最合适的 <Route>。
<Route>
定义单个路由规则，通过 path 属性指定匹配的 URL 路径，element 属性指定路径匹配时要渲染的 React 组件。比如 path="/" 对应渲染 <Home /> 组件，实现首页的展示。
路由匹配规则详解
根路由与默认渲染
当设置 <Route index element={<Home />}> 时，这里的 index 关键字表示这是根路径（/）的默认渲染组件。也就是说，当用户访问应用根路径，<Home /> 组件就会被渲染。同时，也可以通过 <Route path="/" element={<Home />}> 这种常规方式来指定根路径的渲染组件。
嵌套路由
以 path="/features" 为例，它可以包含子路由。如 <Route path="/features" element={<Features />}>，<Features /> 组件内部又可以进一步定义子路由，像 <FeatureA />、<FeatureB />、<FeatureC /> 等。通过这种方式，可以构建出层次分明的路由结构，方便管理复杂的页面层级关系。
动态路由
- 对于像
path="products/:id"这样的路由，:id是一个动态参数。在对应的组件（如<Product />）中，可以通过useParamsHook来获取这个参数值。这使得我们可以根据不同的参数值展示不同的产品详情，极大地提高了路由的灵活性。 - 还可以通过
useSearchParamsHook来匹配URL中?后面的搜索参数，如用const [searchParams] = useSearchParams(); const query = searchParams.get("query");来获取http://aaa.com/username?query="like"中query的值。
路由导航与重定向
导航链接
<NavLink> 是 React-Router 提供的用于导航的组件，它会在匹配当前路径时添加特定的样式类（默认是 active 类），方便开发者进行样式定制，指示当前激活的导航项。例如 <NavLink to="/"> 会创建一个指向根路径的导航链接。
重定向
通过 <Route index element={<Navigate replace to="price" />}> 可以实现重定向功能。这里表示当访问某个父路由（如 /features）的根路径时，会自动重定向到 /features/price 路径，replace 属性表示替换当前的历史记录条目，而不是新增一条。
路由守卫
图片中展示的自定义路由守卫 <ProtectRoute> 是一个非常实用的功能。它通过检查用户的登录状态（如 const isLogin = useLogin();）来决定是否允许访问特定路由。如果用户未登录，就会被重定向到首页（if(!isLogin) navigate("/");）。这种机制可以有效保护应用中的某些受限页面，确保只有授权用户才能访问。
加载动画与 Suspense
利用 <Suspense fallback={<SpinnerFullPage />}> 可以在路由组件加载时展示加载动画。当被包裹的路由组件（如在 <Routes> 内的组件）处于异步加载状态时，fallback 属性指定的 <SpinnerFullPage /> 组件就会被渲染，为用户提供友好的加载反馈，提升应用的交互体验。
总结
React-Router 提供了从基本的路由匹配、导航，到复杂的嵌套路由、路由守卫以及加载动画处理等强大功能。希望通过本文的分享，能帮助大家快速上手 React-Router 。