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等等。我这里只是列出了差距比较大而撰写方法最为截然不同的两种,我个人当然是青睐于路由数组,但还是各有各的喜欢吧

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Router v6 中,路由的懒加载流程与 v5 有所不同。以下是实现路由懒加载的步骤: 1. 确保你已经安装了 `react-router-dom` 的版本为 6.x。 ```bash npm install react-router-dom@next ``` 2. 导入需要使用的组件和函数: ```jsx import React, { lazy, Suspense } from 'react'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; ``` 3. 创建需要懒加载的组件: ```jsx const Home = lazy(() => import('./components/Home')); const About = lazy(() => import('./components/About')); const Contact = lazy(() => import('./components/Contact')); ``` 4. 使用懒加载的组件和路由: ```jsx function App() { return ( <Router> <Suspense fallback={<div>Loading...</div>}> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> </Routes> </Suspense> </Router> ); } export default App; ``` 在上面的代码中,`Suspense` 组件用于在组件加载期间显示一个加载提示(例如 "Loading..."),直到组件加载完成。`fallback` 属性指定了加载期间显示的内容。 使用 `Routes` 组件来定义路由,而不是之前的 `Switch` 组件。 在每个 `Route` 组件中,使用 `element` 属性来指定要渲染的懒加载组件。 这样,当用户访问相应的路由时,对应的组件将会被动态加载并渲染。 请注意,v6 中还有其他一些变化,如路由路径匹配的语法和路由传参等。你可以查阅 React Router v6 的官方文档以获取更详细的信息。 希望这个例子对你有帮助!如果有任何问题,请随时向我提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值