React路由使用

创建项目

通过vite工具来构建react项目

npm create vite

然后按步骤输入项目名称（react-vite-app）
选择React、选择Typescript

运行项目

cd react-vite-app
npm i
npm run dev

运行结果

安装路由依赖

react-router-dom

路由（一）

通过 Link组件切换路由，注意Link组件需要在Router组件内部使用

App.tsx

import Home from './pages/home'
import About from './pages/about'
import "./App.css"

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'

function App() {

  return (
    <Router>
      <div className='nav_list'>
        <div className='nav_item'> <Link to="/">Home</Link> </div>
        <div className='nav_item'> <Link to="/about">About</Link> </div>
      </div>
      <Routes>
        <Route path='/' element={<Home></Home>}></Route>
        <Route path='/about' element={<About></About>}></Route>
      </Routes>
    </Router>
  )
}

export default App

路由（二）

在main.tsx页面，通过createBrowserRouter方法创建路由，再传入RouterProvider组件中

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'

import App from './App.tsx'
import Home from './pages/home'
import About from './pages/about'

import { createBrowserRouter, RouterProvider } from 'react-router-dom'

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '',
        element: <Home />,
      }, {
        path: 'about',
        element: <About />,
      }
    ]
  }
])

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>,
)

在App.tsx页面中通过Outlet组件展示路由页面

App.tsx

import "./App.css"
import { Outlet, useNavigate, Link } from 'react-router-dom'

function App() {
  const navigate = useNavigate()
  const handleNavClick = (path: string) => {
    navigate(path)
  }

  return (
    <>
      {/* 通过点击调用navigate方法切换 */}
      <div className='nav_list'>
        <div className='nav_item'> <button onClick={() => handleNavClick('/')}>Home</button> </div>
        <div className='nav_item'> <button onClick={() => handleNavClick('/about')}>About</button> </div>
      </div>
      {/* link组件切换路由 */}
      <div className='nav_list'>
        <div className='nav_item'> <Link to="/">Home</Link> </div>
        <div className='nav_item'> <Link to="/about">About</Link> </div>
      </div>
      <Outlet></Outlet>
    </>
  )
}

export default App

抽离路由表

src目录下新建router目录，并进入router新建index.tsx文件

/router/index.tsx

import React, { ComponentType } from 'react'
import { createBrowserRouter } from "react-router-dom";

import App from '../App.tsx'
// import Home from "../pages/Home";
import About from "../pages/About";

// 懒加载
const load = (Com: ComponentType) => <React.Suspense fallback={<div>Loading...</div>}><Com></Com></React.Suspense>

const router = createBrowserRouter([
    {
        path: "/",
        element: <App />,
        errorElement: '',
        children: [
            {
                path: '',
                element: load(React.lazy(() => import('../pages/Home')))
            },
            {
                path: 'about',
                element: <About></About>
            }
        ]
    }
])

export default router

main.tsx页面引入router并使用

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import router from './router/index.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>,
)

运行结果