reactrouter6.4+的项目种路由实现方式（列举两种）

至笔者发布该文章为止&＃xff0c;react-router已经到了6.8.2版本&＃xff0c;但中文文档仍旧遥远&＃xff0c;网上教程参差不齐而大多是老版本。故笔者也是顶着蹩脚的英文阅读能力对react-router的6.4&＃43;版本有了一定的认识后&＃xff0c;写下本篇文章

来源&＃xff1a; 官方文档
实际上&＃xff0c;官方也给出了示例&＃xff1a;https://github.com/remix-run/react-router/tree/dev/examples

由于先学习了vue的原因&＃xff0c;我对路由数组实现路由的方式比较熟悉&＃xff0c;故在此也列出了路由对象数组的实现方式&＃xff0c;以及原本的路由组件实现方式
注意&＃xff0c;这里的代码只是演示&＃xff0c;具体撰写位置以实际为准&＃xff08;我这里是正好写一个项目&＃xff09;

正文如下

安装

yarn add react-router-dom // 当然npm什么的也ok&＃xff0c;只是个人习惯用yarn


①路由组件实现方式

index.js

import { createRoot } from &＃39;react-dom/client&＃39;
import { BrowserRouter } from &＃39;react-router-dom&＃39;
import App from &＃39;./App&＃39;const root &＃61; createRoot(document.getElementById(&＃39;root&＃39;))
root.render(<BrowserRouter><App /></BrowserRouter>
)


App.js

import { Routes, Route, Link, Outlet } from &＃39;react-router-dom&＃39;const App &＃61; () &＃61;> {return (<div><Routes><Route path&＃61;&＃39;/&＃39; element&＃61;{<LatOut />}><Route path&＃61;&＃39;about&＃39; element&＃61;{<About />} /><Route path&＃61;&＃39;/dashboard&＃39; element&＃61;{<Dashboard />} /><Route path&＃61;&＃39;*&＃39; element&＃61;{<Nomatch />} /></Route></Routes></div>)
}// 一级路由
const LayOut &＃61; () &＃61;> {return (<div><ul><li><Link to&＃61;&＃39;/&＃39;>Home</Link></li><li><Link to&＃61;&＃39;/about&＃39;>About</Link></li><li><Link to&＃61;&＃39;/dashboard&＃39;>Dashboard</Link></li><li><Link to&＃61;&＃39;/nothing-here&＃39;>nothing here</Link></li></ul>{/* 在父路由元素中使用来呈现其子路由元素。这允许在呈现子路由时显示嵌套UI。如果父路由完全匹配&＃xff0c;它将呈现子索引路由&＃xff0c;如果没有索引路由&＃xff0c;则什么也不呈现 */}<Outlet /></div>)
}// 以下为二级路由
function About() {return (<div><h2>About</h2></div>);
}function Dashboard() {return (<div><h2>Dashboard</h2></div>);
}function NoMatch() {return (<div><h2>Nothing to see here!</h2><p><Link to&＃61;"/">Go to the home page</Link></p></div>);
}


路由组件的实现方式具体如下&＃xff1a;
Routes组件包裹Route组件&＃xff0c;而Route组件又可包裹它的下属Route组件&＃xff08;即子路由&＃xff09;
Link组件实现跳转&＃xff0c;当然也可利用其他方式&＃xff0c;这里只是示例
Outlet组件用在有子路由的父路由底部用于显示子路由&＃xff08;如果需要&＃xff09;

②路由对象数组实现方式

index.js

import { createRoot } from &＃39;react-dom/client&＃39;
import { BrowserRouter } from &＃39;react-router-dom&＃39;
import App from &＃39;./App&＃39;const root &＃61; createRoot(document.getElementById(&＃39;root&＃39;))
root.render(<BrowserRouter><App /></BrowserRouter>
)


App.js

import { Link, Outlet, useRoutes } from &＃39;react-router-dom&＃39;export default function App() {const routes &＃61; [{path: &＃39;/&＃39;,element: <LayOut />,children: [{path: &＃39;dashboard&＃39;,element: <Dashboard />,},{path: &＃39;about&＃39;,element: <About />,},{path: &＃39;*&＃39;,element: <Notmatch />}],},]const element &＃61; useRoutes(routes)return (<div>{element}</div>)
}
function LayOut() {return (<div><ul><li><Link to&＃61;"/">Home</Link></li><li><Link to&＃61;"/about">About</Link></li><li><Link to&＃61;"/dashboard">Dashboard</Link></li></ul><Outlet /></div>)
}
function About() {return (<div><h2>About</h2></div>)
}
function Dashboard() {return (<div><h2>Dashboard</h2></div>)
}
function Notmatch() {return (<div><h2>Not thing</h2><Link to&＃61;&＃39;/&＃39;>Home</Link></div>)
}


路由对象数组的实现方式具体如下&＃xff1a;
App组件内内置routes数组&＃xff08;路由较多的时候也可将它单拎出去一个文件&＃xff09;&＃xff0c;并使用useRoutes Hook&＃xff0c;它将返回element可用于渲染

事实上react-router6.4&＃43;版本&＃xff0c;有很多种路由实现方式&＃xff0c;包括上述两种方法也可相互杂交&＃xff0c;另还有RouterProvider等等。我这里只是列出了差距比较大而撰写方法最为截然不同的两种&＃xff0c;我个人当然是青睐于路由数组&＃xff0c;但还是各有各的喜欢吧