位置: IT常识 - 正文
react-router6.4+的项目种路由实现方式（列举两种）
编辑：rootadmin推荐整理分享react-router6.4+的项目种路由实现方式（列举两种），希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
至笔者发布该文章为止，react-router已经到了6.8.2版本，但中文文档仍旧遥远，网上教程参差不齐而大多是老版本。故笔者也是顶着蹩脚的英文阅读能力对react-router的6.4+版本有了一定的认识后，写下本篇文章
来源： 官方文档 实际上，官方也给出了示例：https://github.com/remix-run/react-router/tree/dev/examples
由于先学习了vue的原因，我对路由数组实现路由的方式比较熟悉，故在此也列出了路由对象数组的实现方式，以及原本的路由组件实现方式 注意，这里的代码只是演示，具体撰写位置以实际为准（我这里是正好写一个项目）
正文如下安装
yarn add react-router-dom // 当然npm什么的也ok，只是个人习惯用yarn
①路由组件实现方式
index.js
import { createRoot } from 'react-dom/client'import { BrowserRouter } from 'react-router-dom'import App from './App'const root = createRoot(document.getElementById('root'))root.render(<BrowserRouter><App /></BrowserRouter>)App.js
import { Routes, Route, Link, Outlet } from 'react-router-dom'const App = () => {return (<div><Routes><Route path='/' element={<LatOut />}><Route path='about' element={<About />} /><Route path='/dashboard' element={<Dashboard />} /><Route path='*' element={<Nomatch />} /></Route></Routes></div>)}// 一级路由const LayOut = () => {return (<div><ul><li><Link to='/'>Home</Link></li><li><Link to='/about'>About</Link></li><li><Link to='/dashboard'>Dashboard</Link></li><li><Link to='/nothing-here'>nothing here</Link></li></ul>{/* 在父路由元素中使用来呈现其子路由元素。这允许在呈现子路由时显示嵌套UI。如果父路由完全匹配，它将呈现子索引路由，如果没有索引路由，则什么也不呈现 */}<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="/">Go to the home page</Link> </p> </div> );}路由组件的实现方式具体如下： Routes组件包裹Route组件，而Route组件又可包裹它的下属Route组件（即子路由） Link组件实现跳转，当然也可利用其他方式，这里只是示例 Outlet组件用在有子路由的父路由底部用于显示子路由（如果需要）
②路由对象数组实现方式
index.js
import { createRoot } from 'react-dom/client'import { BrowserRouter } from 'react-router-dom'import App from './App'const root = createRoot(document.getElementById('root'))root.render( <BrowserRouter> <App /> </BrowserRouter>)App.js
import { Link, Outlet, useRoutes } from 'react-router-dom'export default function App() { const routes = [ { path: '/', element: <LayOut />, children: [ { path: 'dashboard', element: <Dashboard />, }, { path: 'about', element: <About />, }, { path: '*', element: <Notmatch /> } ], }, ] const element = useRoutes(routes) return ( <div> {element} </div> )}function LayOut() { return ( <div> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/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='/'>Home</Link> </div> )}路由对象数组的实现方式具体如下： App组件内内置routes数组（路由较多的时候也可将它单拎出去一个文件），并使用useRoutes Hook，它将返回element可用于渲染
事实上react-router6.4+版本，有很多种路由实现方式，包括上述两种方法也可相互杂交，另还有RouterProvider等等。我这里只是列出了差距比较大而撰写方法最为截然不同的两种，我个人当然是青睐于路由数组，但还是各有各的喜欢吧
上一篇：Vue学习之从入门到神经(两万字收藏篇)(vue快速入门)
