react学习笔记-5：react路由

最新推荐文章于 2024-07-22 00:27:28 发布

snipercai

最新推荐文章于 2024-07-22 00:27:28 发布

阅读量652

点赞数

分类专栏：前端开发 react 文章标签：前端 react

本文链接：https://blog.csdn.net/snipercai/article/details/129370595

版权

前端开发同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

react

7 篇文章 0 订阅

订阅专栏

文章详细介绍了React应用中路由的配置方式，从旧版的组件式路由开始，包括BrowserRouter、Routes和Route的使用，以及如何在App.tsx中引入和设置路由链接。接着，文章展示了新版本的路由配置，采用对象形式的写法，并实现了路由重定向。此外，还讨论了路由的懒加载功能，利用React的`lazy`和`Suspense`进行异步加载组件，并提供了自定义Loading组件的方法。

摘要由CSDN通过智能技术生成

react旧版本路由

旧版本的路由是按照组件的方式来写的

编写router/index.tsx文件

import App from "../App"
import Home from "../views/Home"
import About from "../views/About"
import { BrowserRouter,Routes,Route } from "react-router-dom"
//两种路由模式的组件，BrowserRouter(history模式), HashRouter (Hash模式)

// const baseRouter = () => {
// 如果有逻辑，才需要写return，如果没有逻辑直接reture，可以使用下面的简写
//    return()
//}

const baseRouter = () => (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<App />}>
                <Route path="/home" element={<Home />}></Route>
                <Route path="/about" element={<About />}></Route>
            </Route>
        </Routes>
    </BrowserRouter>
)

export  default baseRouter

修改main.tsx文件，引入router下的首页组件

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

//正确的样式引入顺序
//样式初始化一般放在最前面，引用reset-css
import "reset-css"

//UI框架的样式一般放在组件样式之前
//import XXXX

//全局样式
import "@/assets/styles/global.scss"

//组件的样式
//import App from './App'
import Router from "./router"

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>,
)

修改App.tsx

import { useState } from 'react'
import Comp1 from "@/components/Comp1/index"
import Comp2 from "@/components/Comp2/index"
import { Button, Space } from 'antd';
import {PlayCircleOutlined} from '@ant-design/icons';
import {Outlet} from "react-router-dom"

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      我的React项目 
      <Comp1></Comp1>
      <Comp2></Comp2>
      <Button>我们的按钮</Button>
      <Button type="primary">Primary Button</Button>
      <PlayCircleOutlined spin="true" style={{fontSize:'40px'}}/>
      {/* 占位符组件，类似窗口，用来展示组件的，有点像vue中的router-view*/}
      <Outlet></Outlet>
    </div>
  )
}

路由链接

引入Link组件，并修改App.tsx文件

import { useState } from 'react'
import Comp1 from "@/components/Comp1/index"
import Comp2 from "@/components/Comp2/index"
import { Button, Space } from 'antd';
import {PlayCircleOutlined} from '@ant-design/icons';
import {Outlet, Link} from "react-router-dom"

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      我的React项目 
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/">首页</Link>
      <Comp1></Comp1>
      <Comp2></Comp2>
      <Button>我们的按钮</Button>
      <Button type="primary">Primary Button</Button>
      <PlayCircleOutlined spin="true" style={{fontSize:'40px'}}/>
      {/* 占位符组件，类似窗口，用来展示组件的，有点像vue中的router-view*/}
      <Outlet></Outlet>
    </div>
  )
}

路由重定向

修改router/index.tsx文件，引入Navigate组件，并配置重定向

import App from "../App"
import Home from "../views/Home"
import About from "../views/About"
import { BrowserRouter,Routes,Route,Navigate } from "react-router-dom"
//两种路由模式的组件，BrowserRouter(history模式), HashRouter (Hash模式)

// const baseRouter = () => {
// 如果有逻辑，才需要写return，如果没有逻辑直接reture，可以使用下面的简写
//    return()
//}

const baseRouter = () => (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<App />}>
                {/*配置用户访问/的时候，重定向到/home路径 */}
                <Route path="/" element={<Navigate to='/home' />}></Route>
                <Route path="/home" element={<Home />}></Route>
                <Route path="/about" element={<About />}></Route>
            </Route>
        </Routes>
    </BrowserRouter>
)

react新版本路由

新版本采用对象形式的写法

修改router/index.tsx

import Home from "../views/Home"
import About from "../views/About"
import { Navigate } from "react-router-dom"

const routes = [
    {
        path:"/",
        element:<Navigate to='/home' />
    },
    {
        path:"/home",
        element:<Home />
    },
    {
        path:"/about",
        element:<About />
    }
]

export  default routes

修改main.tsx，引入BrowserRouter组件，用回App顶级组件

import React from 'react'
import ReactDOM from 'react-dom/client'
import "reset-css"
import "@/assets/styles/global.scss"

import { BrowserRouter } from "react-router-dom"
import App from './App'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
       <App />
    </BrowserRouter>
  </React.StrictMode>
)

修改App.tsx，换成hook形式的对象，引入useRoutes库，实例化一个useRoutes对象outlet，最终展示该对象outlet

import { useState } from 'react'
import {useRoutes, Link} from "react-router-dom"
import router from "./router"

function App() {
  const [count, setCount] = useState(0)
  const outlet =useRoutes(router)

  return (
    <div className="App">
      我的React项目 
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/">首页</Link>

      {/* 占位符组件，类似窗口，用来展示组件的，有点像vue中的router-view*/}
      {outlet}
    </div>
  )
}

export default App

路由的懒加载

修改router/index.tsx，引入react库中的lazy，定义一个About对象，实例化lazy函数

import { lazy } from "react"
import Home from "../views/Home"
//import About from "../views/About"
import { Navigate } from "react-router-dom"

const About = lazy(()=>import ("../views/About"))

//懒加载的模式的组件写法，外面需要套一层loading的提示加载组件

const routes = [
    {
        path:"/",
        element:<Navigate to='/home' />
    },
    {
        path:"/home",
        element:<Home />
    },
    {
        path:"/about",
        element:
        <React.Suspense fallback={<div>Loading...</div>}>
            <About />
        </React.Suspense>
    }
]

export  default routes

自定义Loading方法

定义一个Loading函数封装loading组件，引入React库，定义withLoadingComponent组件，设置组件变量为一个JSX.Element对象。

import React,{ lazy } from "react"
import Home from "../views/Home"
//import About from "../views/About"
import User from "../views/User"
import { Navigate } from "react-router-dom"

const About = lazy(()=>import ("../views/About"))

//懒加载的模式的组件写法，外面需要套一层loading的提示加载组件

//定义一个Loading函数
const withLoadingComponent = (comp:JSX.Element) =>{
    return (
        <React.Suspense fallback={<div>Loading...</div>}>
            {comp}
        </React.Suspense>
    )
}

const routes = [
    {
        path:"/",
        element:<Navigate to='/home' />
    },
    {
        path:"/home",
        element:<Home />
    },
    {
        path:"/about",
        element:
        <React.Suspense fallback={<div>Loading...</div>}>
            <About />
        </React.Suspense>
    },
    {
        path:"/user",
//        element:<User />
        element:withLoadingComponent(<User />)
    },
]

export  default routes