react中使用react-router-dom6的全网最详细教学,抓紧学起来

岳承悦
2023-12-01

在本文中,我们将深入研究React Router v6,并介绍如何在React应用程序中使用它。

一、React Router v6的新特性React Router v6是React Router的最新版本,它提供了一些新的特性和改进。以下是React Router v6的一些主要特性:

  1. 改进的导航功能:React Router v6提供了一种新的导航方法,称为“useNavigate”。这个新的导航方法比以前的方法更加简单和直观。
  2. 改进的路由匹配:React Router v6的路由匹配算法比以前的版本更加强大和灵活。它可以匹配更多的URL模式,并且可以更好地处理动态路由。
  3. 改进的代码分割:React Router v6支持动态导入和代码分割,这使得React应用程序可以更快地加载和运行。
  4. 改进的嵌套路由:React Router v6提供了一种更好的方法来处理嵌套路由。这使得React应用程序可以更加灵活和可扩展

二、安装React Router v6要开始使用React Router v6,首先需要安装它。可以使用npm或yarn来安装React Router v6。

以下是使用npm安装React Router v6的命令:
npm install react-router-dom@next安装完成后,就可以开始在React应用程序中使用React Router v6了。

三、使用React Router v6在React应用程序中使用React Router v6非常简单。以下是一些基本的用法

  1. 定义路由要定义路由,需要使用“Route”组件。以下是一个简单的例子:
import { Route } from 'react-router-dom';
function App() { return ( <div>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</div> );}

在这个例子中,我们定义了三个路由:“/”,“/about”和“/contact”。每个路由都有一个对应的组件,当用户访问这个路由时,就会渲染这个组件。
2. 导航到不同的路由要导航到不同的路由,可以使用“Link”组件。以下是一个简单的例子:

import { Link } from 'react-router-dom';function App() { return ( <div>
 <nav>
   <ul>
     <li>
       <Link to="/">Home</Link>
     </li>
     <li>
       <Link to="/about">About</Link>
     </li>
     <li>
       <Link to="/contact">Contact</Link>
     </li>
   </ul>
 </nav>
 <Route exact path="/" component={Home} />
 <Route path="/about" component={About} />
 <Route path="/contact" component={Contact} />
</div> );}

在这个例子中,我们使用“Link”组件来创建一个导航菜单。当用户点击菜单项时,就会导航到对应的路由。
3. 使用嵌套路由React Router v6支持嵌套路由,这使得React应用程序可以更加灵活和可扩展。以下是一个嵌套路由的例子:

import { Route, Routes } from 'react-router-dom';function App() { return ( <div>
  <nav>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/contact">Contact</Link>
      </li>
    </ul>
  </nav>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />}>
    <Route path="history" element={<History />} />
    <Route path="team" element={<Team />} /> </Route>
    <Route path="/contact" element={<Contact />} />
  </Routes>
</div> );}

在这个例子中,我们使用“Routes”组件来定义嵌套路由。在“/about”路由下,我们定义了两个子路由:“/about/history”和“/about/team”。当用户访问这些路由时,就会渲染对应的组件。

四、路由模块化,以下是我将路由抽离成ts文件的写法

import type { FC } from 'react'
import type { RouteObject } from 'react-router'
import { lazy } from 'react'
import { Navigate, useRoutes } from 'react-router-dom'

import LoginPage from '../views/login'
import LayoutPage from '../views/layout'
import Dashboard from '../views/dashboard'

const AnswerPage = lazy(() => import(/* webpackChunkName: "answer'"*/ '../views/answer'))
const VideoPage = lazy(() => import(/* webpackChunkName: "videoPage'"*/ '../views/videoPage'))
const MyPage = lazy(() => import(/* webpackChunkName: "my'"*/ '../views/my'))

const routeList: RouteObject[] = [
  {
    path: '/login',
    element: <LoginPage />
  },
  {
    path: '/',
    element: <LayoutPage />,
    children: [
      {
        path: '',
        element: <Navigate to='dashboard' />
      },
      {
        path: 'dashboard',
        element: <Dashboard />
      },
      {
        path: 'answer',
        element: <AnswerPage />
      },
      {
        path: 'videoPage',
        element: <VideoPage />
      },
      {
        path: 'my',
        element: <MyPage />
      }
    ]
  }
]

const RenderRouter: FC = () => {
  const element = useRoutes(routeList)
  return element
}

export default RenderRouter

import React, { Suspense } from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
import RenderRouter from './routes'
import { DotLoading } from 'antd-mobile'

function App () {
  return (
    <Router>
      <Suspense fallback={<DotLoading />}>
        <RenderRouter></RenderRouter>
      </Suspense>
    </Router>
  )
}

export default App

五、总结React Router v6是React应用程序中使用的最新版本的路由库。

它提供了许多新的特性和改进,包括改进的导航功能、改进的路由匹配、改进的代码分割和改进的嵌套路由。在React应用程序中使用React Router v6非常简单,只需要定义路由和使用“Link”组件来导航到不同的路由。如果需要使用嵌套路由,可以使用“Routes”组件来定义它们。

有问题欢迎大家评论区交流,我会一一回复

 类似资料: