React Router 6 - 嵌套路由、路由传递参数

一、嵌套路由1、基本介绍默认情况下子组件匹配成功父组件的导航也会高亮当 NavLink 上添加了 end 属性后子组件匹配成功父组件的导航不会高亮Outlet组件用于当前Route产生嵌套时渲染其对应的后续子路由2、演示1pageAbout 页面export default function About() { return h3About Content/h3; }Home 页面import { NavLink, Outlet } from react-router-dom; export default function Home() { function computedClassName({ isActive }) { return isActive ? my-item active : my-item; } return ( div h3Home Content/h3 ul li NavLink className{computedClassName} tonews News /NavLink /li li NavLink className{computedClassName} tomessage Message /NavLink /li /ul Outlet / /div ); }News 页面export default function News() { return ( ul linews001/li linews002/li linews003/li /ul ); }Message 页面export default function Message() { return ( div ul li a href/message1message001/anbsp;nbsp; /li li a href/message2message002/anbsp;nbsp; /li li a href/message3message003/anbsp;nbsp; /li /ul /div ); }2routeindex.tsximport About from ../pages/About; import Home from ../pages/Home; import News from ../pages/News; import Message from ../pages/Message; import { Navigate } from react-router-dom; export default [ { path: /about, element: About /, }, { path: /home, element: Home /, children: [ { path: news, element: News /, }, { path: message, element: Message /, }, ], }, { path: /, element: Navigate to/about /, }, ];3mainApp 组件import { NavLink, useRoutes } from react-router-dom; import routes from ./routes; import ./App.css; export default function App() { const element useRoutes(routes); function computedClassName({ isActive }) { return isActive ? my-item active : my-item; } return ( div div NavLink className{computedClassName} to/about About /NavLink NavLink className{computedClassName} to/home Home /NavLink /div div{element}/div /div ); }.my-item{padding:10px;cursor:pointer;}.active{color:red;}index.tsximport { StrictMode } from react; import { createRoot } from react-dom/client; import { BrowserRouter } from react-router-dom; import App from ./App.tsx; createRoot(document.getElementById(root)!).render( StrictMode BrowserRouter App / /BrowserRouter /StrictMode, );二、路由传递参数1、演示1pageMessage 页面import { useState } from react; import { NavLink, Outlet } from react-router-dom; export default function Message() { const [messages] useState([ { id: 01, title: 消息 1 }, { id: 02, title: 消息 2 }, { id: 03, title: 消息 3 }, ]); return ( div h3传递 params 参数/h3 ul {messages.map((item) ( li key{item.id} NavLink to{/message/detail/${item.id}/${item.title}}{item.title}/NavLink /li ))} /ul h3传递 search 参数/h3 ul {messages.map((item) ( li key{item.id} NavLink to{/message/news?id${item.id}title${item.title}}{item.title}/NavLink /li ))} /ul h3传递 state 参数/h3 ul {messages.map((item) ( li key{item.id} NavLink to/message/tip state{{ id: item.id, title: item.title }} {item.title} /NavLink /li ))} /ul Outlet / /div ); }Detail 页面import { useParams, useMatch } from react-router-dom; export default function Detail() { const { id, title } useParams(); // const x1 useMatch(/message/detail/:id/:title); // console.log(x1); // const x2 useMatch(/message/detail/:id); // console.log(x2); return ( ul liid: {id}/li lititle: {title}/li /ul ); }News 页面import { useSearchParams, useLocation } from react-router-dom; export default function News() { const [search, setSearch] useSearchParams(); const id search.get(id); const title search.get(title); const x useLocation(); console.log(x); return ( div button onClick{() setSearch(id04title消息 4)}点击更新一下收到的 search 参数/button ul liid: {id}/li lititle: {title}/li /ul /div ); }Tip 页面import { useLocation } from react-router-dom; export default function Tip() { const { state: { id, title }, } useLocation(); return ( ul liid: {id}/li lititle: {title}/li /ul ); }2routeindex.tsximport Message from ../pages/Message; import Detail from ../pages/Detail; import News from ../pages/News; import Tip from ../pages/Tip; import { Navigate } from react-router-dom; export default [ { path: /message, element: Message /, children: [ { path: detail/:id/:title, element: Detail /, }, { path: news, element: News /, }, { path: tip, element: Tip /, }, ], }, { path: /, element: Navigate to/message /, }, ];3mainApp 组件import { useRoutes } from react-router-dom; import routes from ./routes; export default function App() { const element useRoutes(routes); return div{element}/div; }main.tsximport { StrictMode } from react; import { createRoot } from react-dom/client; import { BrowserRouter } from react-router-dom; import App from ./App.tsx; createRoot(document.getElementById(root)!).render( StrictMode BrowserRouter App / /BrowserRouter /StrictMode, );2、补充学习useParams用于返回当前匹配路由的 params 参数useSearchParams用于读取和修改当前位置的 URL 中的查询字符串返回一个包含两个值的数组内容分别为当前的 search 参数、更新 search 的函数useMatch用于匹配当前 URL 是否与指定路径模式匹配如果不匹配返回 nulluseLocation用于返回当前 URL 的 location 对象让开发者能够获取和监听当前路由信息