1. Toy模板网首页
  2. > Toy博客

React笔记（六）React路由

10月前 作者：鸣鲷有柒 分类：Toy博客 阅读(47) 违法举报

这篇具有很好参考价值的文章主要介绍了React笔记（六）React路由。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、React路由简介

React 官方并没有提供对应的路由插件，因此，我们需要下载第三方的路由插件 —— React Router DOM。

React Router 在 2021 年 11 月份的时候更新 v6 的版本。本次课就主要讲解V6版本

二、路由配置

1、下载路由

在项目根目录中，通过以下命令

yarn add react-router-dom
2、路由配置

1）首先在react项目的入口文件index.js文件中，使用<BrowserRouter>将<App>包裹起来

import {BrowserRouter} from 'react-router-dom'
​
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter> 
);

BrowserRouter：包裹这个应用，一个React应用只需使用一次

在 React Router 中提供了两种路由模式：hash 和 history。

对应的的路由组件分别是：

  • HashRouter：hash 模式的路由

  • BrowserRouter：history 模式的路由

实际使用时，任选其中一个模式引入即可

2）其次，在App.js文件中，使用<Routes>设置路由出口，使用<Route>指定导航链接

import React from 'react'
import {Routes,Route} from 'react-router-dom'
import Login from './pages/Login'
import Register from './pages/Register'
import Home from './pages/Home'
export default function App() {
  return (
   <Routes>
     <Route path='/login' element={<Login/>}></Route>
     <Route path='/register' element={<Register/>}></Route>
     <Route path='/' element={<Home/>}></Route>
   </Routes>
  )
}

核心组件作用说明

  • Routes:提供一个路由出口，满足条件的路由组件会渲染到组件内部

  • Route: 用于指定导航链接，完成路由跳转

    • path:path属性指定匹配的路径地址

    • element element属性指定要渲染的组件

三、路由跳转

React Router 中，路由的跳转分为两种方式：

  • 标签（组件）跳转

  • JS（API）跳转

1、通过Link组件跳转
import React from 'react'
import {Link} from 'react-router-dom'
export default function Login() {
  return (
    <div>
        <h1>用户登录</h1>
        <Link to="/register">没有账号,去注册</Link>
    </div>
  )
}
2、编程式路由跳转

实现步骤

  • 导入useNavigate钩子函数

import {useNavigate} from 'react-router-dom'

  • 执行钩子函数得到跳转函数

 let navigate=useNavigate();

  • 执行跳转函数完成跳转

import React from 'react'
import {useNavigate} from 'react-router-dom'
​
export default function Register() {
  const navigate=useNavigate()
  const register=(e)=>{
    e.preventDefault()
    navigate('/login')
  }
  return (
    <div>
        <h1>用户注册</h1>
        <a href="#" onClick={(e)=>{register(e)}}>已注册，去登录</a>
    </div>
  )
}

注意

  • 如果在跳转时不想加历史记录，可以添加额外参数replace为true

 const register=(e)=>{
    e.preventDefault()
    navigate('/login',{replace:true})
  }

四、嵌套路由

1、基础配置

实现步骤

  • 定义嵌套路由声明

 <Routes>
     <Route path='/login' element={<Login/>}></Route>
     <Route path='/register' element={<Register/>}></Route>
     <Route path='/' element={<Home/>}>
       <Route path='category' element={<Category/>}></Route>
       <Route path='goods' element={<Goods/>}></Route>
     </Route>
 </Routes>

  • 设置二级路由出口

export default function Home() {
    return (
        <>
          <aside>
              <ul>
                  <li><NavLink to="/categroy">分类管理</NavLink></li>
                  <li><NavLink to="/goods">商品管理</NavLink></li>
              </ul>
          </aside>
          <section>
                 {/* 二级路由出口 */}
                <Outlet></Outlet>
          </section>
        </>
    )
}
2、默认二级路由设置
<Routes>
   <Route path='/login' element={<Login/>}></Route>
   <Route path='/register' element={<Register/>}></Route>
   <Route path='/' element={<Home/>}>
       {/*默认二级路由，添加index属性，删除掉path属性*/}
       <Route index element={<Main/>}></Route>
       <Route path='category' element={<Category/>}></Route>
       <Route path='goods' element={<Goods/>}></Route>
   </Route>
</Routes>
3、404页配置

应用场景：当所有的路径都没有匹配的时候显示

语法说明：在各级路由的最后添加*号路由作为兜底

<Routes>
    <Route path='/login' element={<Login/>}></Route>
    <Route path='/register' element={<Register/>}></Route>
    <Route path='/' element={<Home/>}>
       {/*默认二级路由，添加index属性，删除掉path属性*/}
       <Route index element={<Main/>}></Route>
       <Route path='category' element={<Category/>}></Route>
       <Route path='goods' element={<Goods/>}></Route>
     </Route>
     {/*当所有路径都没有匹配时渲染此路由*/}
     <Route path='*' element={<NotFound/>}></Route>
</Routes>

五、路由模式

BrowserRouter模式部署在Nginx服务器上出现404问题的解决办法

1、React打包

  • 在index.js的<BrowserRouter>上添加basename属性，比如

<BrowserRouter basename='/crem'>
    <App></App> 
  </BrowserRouter>

  • 在package.json中添加"homepage": "."

{
     "homepage": "."
}

  • 在终端上执行打包命令

yarn build
2、Nginx上部署

  • 打包后会产生一个build文件夹，然后将该文件改名为crem,

  • 上传文件的linux服务器的/opt目录下

  • 在/etc/nginx/conf.d/default.conf下添加如下配置

 location /crem {
     alias /opt/crem;
     index index.html;
 }

  • 进入shell中执行如下命令

ps aux|grep nginx  #查看nginx进程
killall -9 nginx   #杀死nginx进程
/usr/sbin/nginx    #启动nginx服务器
3、防止404的配置

  • 修改/etc/nginx/conf.d/default.conf文件，添加如下配置即可

 location /crem {
     alias /opt/crem;
     index index.html;
     try_files $uri /crem/index.html;
 }

六、路由传参

1、searchParams传参

实现步骤

  • 传参

import {useNavigate} from 'react-router-dom'
export default function CategroyList() {
  let navigate=useNavigate();
  return (
    <div>
        <h2>CategroyList</h2>
        <button onClick={()=>{navigate('/categroyDetail?id=12')}}>详情</button>
    </div>
  )
}

  • 获取参数

import {useSearchParams} from 'react-router-dom'

export default function CategoryDetail() {
  let [params]=useSearchParams()
  return (
    <div>
        <h2>CategroyDetail</h2>
        <div>
            ID:{params.get('id')}
        </div>
    </div>
  )
}
2、params传参

实现步骤

  • 路由设置

 <BrowserRouter>
     <Routes>
        <Route path='/home' element={<Layout/>}>
           <Route path='categroy-detail/:id' element={<CategoryDetail/>}></Route>
         </Route>
      </Routes>
 </BrowserRouter>

  • 传参

import {useNavigate} from 'react-router-dom'
export default function CategroyList() {
  let navigate=useNavigate();
  return (
    <div>
        <h2>CategroyList</h2>
        <button onClick={()=>{navigate('/home/categroy-detail/13')}}>详情</button>
    </div>
  )
}

  • 获取参数

import React from 'react'
import {useParams} from 'react-router-dom'

export default function CategoryDetail() {
  let params=useParams()
  return (
    <div>
        <h2>CategroyDetail</h2>
        <div>
            ID:{params.id}
        </div>
    </div>
  )
}

七、集中式路由渲染

实现步骤

  • 在项目根目录创建router文件夹，并在该目录下创建index.jsx

  • 在router/index.jsx编写路由配置项

import Login from '../pages/Login'
import Register from '../pages/Register'
import Home from '../pages/Home'
import CategoryList from '../pages/Category'
import CategoryDetail from '../pages/Category/Detail'
import GoodsList from '../pages/Goods'
import Main from '../pages/Home/Main'
export default [
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'/register',
        element:<Register/>
    },
    {
        path:'/',
        element:<Home/>,
        children:[
            {
                index:true,
                element:<Main/>
            },
            {
                path:'/categoryList',
                element:<CategoryList/>
            },
            {
                path:'/categoryDetail/:id',
                element:<CategoryDetail/>
            },
            {
                path:'/goodsList',
                element:<GoodsList/>
            }
        ]
    }
]

  • 在App.jsx中通过useRoutes钩子函数来进行集中式配置

import {useRoutes} from 'react-router-dom'
import router from './router/index'
function App() {
  return useRoutes(router)
}
export default App;

  • 在项目根目录下的index.js中使用<BrowserRouter>包裹<App>

root.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>
)

八、路由懒加载

1、实现步骤

  • 使用lazy(()=>import('xxx'))方式导入组件

import {lazy} from 'react'
const Login=lazy(()=>import('../pages/Login'))
const Register=lazy(()=>import('../pages/Register'))
const Home=lazy(()=>import('../pages/Home'))
const CategoryList=lazy(()=>import('../pages/Category'))
const CategoryDetail=lazy(()=>import('../pages/Category/Detail'))
const GoodsList=lazy(()=>import('../pages/Goods'))
const Main=lazy(()=>import('../pages/Home/Main'))
export default [
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'/register',
        element:<Register/>
    },
    {
        path:'/',
        element:<Home/>,
        children:[
            {
                index:true,
                element:<Main/>
            },
            {
                path:'/categoryList',
                element:<CategoryList/>
            },
            {
                path:'/categoryDetail/:id',
                element:<CategoryDetail/>
            },
            {
                path:'/goodsList',
                element:<GoodsList/>
            }
        ]
    }
]

  • 通过 React 中提供了 <Suspense> 组件，来实现路由的懒加载。

import {Suspense} from 'react'
function App() {
  return(
    <Suspense fallback={<>loading</>}>
      {useRoutes(router)}
    </Suspense>
  )
}

<Suspense> 组件身上，必须设置一个 fallback 属性，属性值可以是一个 HTML 标签，也可以是一个自定义的组件。用于当路由组件还未加载出来前的提示。

2、解决路由闪屏

配置完路由懒加载后出现当进行路由跳转时，出现闪屏现象，要向解决这个问题可以使用 react-loadable插件进行解决

  • 先下载react-loadable依赖包

yarn add react-loadable

  • 建立一个loadable.js，放在src/utils/loadable.js

import Loadable from 'react-loadable';
export default function withLoadable(comp) {
    return Loadable({
    	//懒加载组件页面
        loader: comp,
        loading: () => null,
        delay: "",
    })
}

  • 修改router/index.js文章来源地址https://www.toymoban.com/news/detail-694479.html

import loadable from '../utils/loadable'
const Login=loadable(()=>import('../pages/Login'))
const Register=loadable(()=>import('../pages/Register'))
const Home=loadable(()=>import('../pages/Home'))
const CategoryList=loadable(()=>import('../pages/Category'))
const CategoryDetail=loadable(()=>import('../pages/Category/Detail'))
const GoodsList=loadable(()=>import('../pages/Goods'))
const Main=loadable(()=>import('../pages/Home/Main'))
export default [
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'/register',
        element:<Register/>
    },
    {
        path:'/',
        element:<Home/>,
        children:[
            {
                index:true,
                element:<Main/>
            },
            {
                path:'/categoryList',
                element:<CategoryList/>
            },
            {
                path:'/categoryDetail/:id',
                element:<CategoryDetail/>
            },
            {
                path:'/goodsList',
                element:<GoodsList/>
            }
        ]
    }
]

到了这里，关于React笔记（六）React路由的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Node.js npm V8 React Express的运行配合关系：构建JavaScript应用的基石

    目录 Node.js 和 V8 引擎 Node.js 和 npm LTS（Long Term Support） React Node.js的作用 Express Node.js 和 V8 引擎 Node.js 使用 Google 的 V8 JavaScript 引擎 来执行 JavaScript 代码。V8 是一个高性能的 JavaScript 和 WebAssembly 引擎，用于在 Google Chrome 浏览器和 Node.js 中运行 JavaScript。 V8 引擎的更新 通常包括

    2024年03月12日
    浏览(64)

  • 👾 笔记 | react-transition-group 实现路由切换过渡动画

    React 18 React router v6 React Transition Group 是一个 React 库，专门用于在 React 应用中管理和处理过渡动画效果。这个库提供了一组组件，包括 Transition、CSSTransition、SwitchTransition 和 TransitionGroup，帮助在组件的进入和退出时应用动画效果。 Transition 是一个与平台无关的组件，通常结合

    2024年03月09日
    浏览(69)
  • React学习笔记（番外一）——video.js视频播放组件的入门及排坑经历

    React学习笔记（番外一）——video.js视频播放组件的入门及排坑经历

    很久没有静下心写博客了。近段时间接到一个任务，前端页面要加上视频播放功能。实现加排坑前后花了三天时间（别问我问什么这么久😂），觉得还是有必要记录一下的。 这一部分有必要写在最前面，避免你看了一长串安装、引入、代码，然后发现自己想要播放的视频格

    2024年02月02日
    浏览(47)
  • 0604嵌套路由与路由传参-react路由-react

    0604嵌套路由与路由传参-react路由-react

    1.1 使用 示例效果如下图1.1-1所示： 该示例代码其他部分和上一篇相同，这里主要讲解下嵌套路由的使用。 分析：home组件中嵌套了News和Message两个路由组件。 创建News组件 在原项目结构Home文件夹下创建News/index.jsx 源代码1.1-1如下所示 创建Message组件 Home文件夹下创建Message/ind

    2024年02月06日
    浏览(87)
  • react基础-React原理揭秘&React路由基础

    react基础-React原理揭秘&React路由基础

    能够说出React组件的更新机制 能够对组件进行性能优化 能够说出虚拟DOM和DIff算法 setState() 的两个作用 修改state 更新组件 过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染当前组件子树（当前组件以其所有子组件） 减轻state 减轻state：只存储跟组件渲染相关的数据

    2024年02月12日
    浏览(46)
  • 0601概述-react路由-react

    0601概述-react路由-react

    1.1 简述 单页面应用和多页面应用是两种不同的 Web 应用程序架构。 单页面应用（SPA）是指在一个 HTML 页面中动态加载和渲染所有的应用程序内容，通过前端 JavaScript 操作来实现页面的变化和交互。SPA 不需要每次请求新的 HTML 页面，因此可以提供更快的响应速度和更好的用户

    2023年04月23日
    浏览(44)

  • 【React 】react 中的路由鉴权与路由拦截

    在 React 中， 路由拦截 和 路由鉴权 是两个相关但不完全相同的概念。 1 路由拦截 路由拦截（Route Interception）**是指在用户导航到某个路由之前，通过某种逻辑来拦截、检查或修改导航行为。**它可以用于实现权限控制、身份验证、页面加载前的准备工作等场景。在路由拦截中

    2024年02月10日
    浏览(39)

  • 【React】React-router路由

    路由是根据不同的url地址展示不同的内容或页面 注： 一个针对react设计的路由解决方案，可以友好的帮助解决React components到URL之间的同步映射关系 导入路由 注：路由模式有 HashRouter 和 BrowserRouter 两种模式，其中BrowserRouter的路径没有#，样式好看，真正朝后端发请求，后端若

    2023年04月17日
    浏览(69)

  • JavaScript之React

    前言 React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发。它可以让开发者编写可重复使用的 UI 组件，并且可以自动地更新 UI。React 的运行原理可以分为两个部分：虚拟 DOM 和组件更新。 虚拟 DOM React 使用虚拟 DOM 来代表实际的 DOM 树。虚拟 DOM 是一个轻量级的 JavaSc

    2024年02月06日
    浏览(43)
  • 【React】react-router 路由详解

    【React】react-router 路由详解

    🚩🚩🚩 💎个人主页: 阿选不出来 💨💨💨 💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记. 💨💨💨 💎目前开发的专栏: JS 🍭Vue🍭React🍭 💨💨💨 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，根据不同的url地

    2024年02月01日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包