react路由第一节安装和简单应用

得想办法娶到那个女人

已于 2024-08-09 20:26:28 修改

阅读量194

点赞数 2

分类专栏： react从零开始文章标签： react.js javascript 前端

于 2024-08-09 19:47:10 首次发布

本文链接：https://blog.csdn.net/qq_44206824/article/details/141069874

版权

react从零开始专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

1.用vite工具创建一个react项目

在这里插入图片描述

2.安装路由

npm install react-router-dom@要安装的版本号例如
npm install react-router-dom@6.22.2

安装成功可以看到路由版本：如下图所示

在这里插入图片描述
3.其余详细见官网详细教程
react 路由官网

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

得想办法娶到那个女人

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
react路由第一节安装和简单应用

2.其余见官网详细教程。
复制链接

扫一扫

专栏目录

第4章、React-Router路由配置；

weixin_44121341的博客

04-12

507

React-Router路由配置

Vue路由和React路由

qq_39307266的博客

02-23

2205

Vue路由

参与评论您还未登录，请先登录后发表或查看评论

第十二章 React 路由配置，路由参数获取

Etc.End的博客

12-11

2305

在React中，路由是用于管理应用程序中不同页面之间的切换和导航的机制。它允许开发人员根据用户在应用程序中的行为，如点击链接或提交表单，来切换不同的组件或页面。最为常见的就是我们的导航菜单，点击菜单以后现实相对应的页面。react-router-dom是React中非常重要的一个路由管理库，对于开发React应用程序来说是很有必要学习的。在React中，react-router-dom可以帮助我们实现页面间的跳转和导航，使得单页应用能够实现多页应用类似的切换效果。

react路由详解

m0_56947432的博客

07-07

759

比如:用户要看首页,我们就让用户点击一个指向首页的a标签,点击之后,浏览器地址栏的路径会发生变化. 我们就可以通过最新的路径,去判断用户要看哪个页面视图. /home 表示用户要查看首页. 当路径是/detail的时候,表示用户要看详情页。实现单页面应用的原理: 只加载一个html页面(整个网站所有的视图(每一个单独页面))都包含在这个html页面中.当用户要打开首页的时候,就只展示首页对应的视图,其他的隐藏.当用户要查看详情页的时候,只展示详情页视图,其他的视图隐藏。

React路由

mantou_riji的博客

11-30

5876

多页面应用是指每切换一个页面就是一个真正的html页面。单页面应用是指整个应用只有一个完整的页面，点击页面中的链接不会刷新页面只会局部更新，并且数据都需要通过ajax请求获取，并在前端异步展示。单页面，多组件。路由匹配的是只是端口号后面的内容（/about、/history）。那么是如何实现一点击导航栏的选项浏览器地址栏中的路径就改变呢，这就需要借助history实现。浏览器的BOM身上有一个history，用于管理浏览器的路径、历史记录等。但是BOM原生的history不好操作我们一般用一个封装

React 路由基础--React路由介绍

m0_54088431的博客

11-08

4155

两种常用的路由模式：BrowserRouter和HashRouter声明当前要用是一个非hash的模式的路由包裹整个应用一个React应用只需要使用一次HashRouter，hash模式的路由一个有#（HashRouter），一个一带#（BrowserRouter）（推荐）Link指定导航链接，完成路由跳转to属性指定路由地址，最终被渲染为a标签Routes提供一个路由出口，满足条件的路由组件，会渲染到组件内部Route用于指定路由组件和路由地址path：路由组件对应的路径；

React路由-react-router-dom安装与使用(一)

此鱼非闲鱼也的博客

07-14

4583

路由当应用变得复杂的时候，就需要分块的进行处理和展示。传统方式的处理:把整个应用分成了多个页面，然后通过 URL 进行连接。传统方式的弊端: 每次切换页面都需要重新发送所有请求和渲染整个页面，性能上会有影响；会导致整个 JavaScript 重新执行，丢失状态。单页面应用单页面应用SPA(Single Page Application): 整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容。 **单页面应用优缺点**如下：

react路由

m0_62823653的博客

07-18

749

第一部分路由基本使用第一部分路由基本使用。

react的路由配置和路由嵌套

qq_42505615的博客

11-04

559

也是基于我这篇《用react的路由写一个简单的导航》文章的延伸：https://blog.csdn.net/qq_42505615/article/details/121118546?spm=1001.2014.3001.5501 路由配置： 1.指定路由模式，引入HashRouter ps：咱们默认用的是 BrowserRouter 2.精确url匹配（exact）例如:我们想把home作为默认的显示页面 <Nav></Nav> .

最简单的脚手架工具搭建的react实现路由和状态机demo

04-24

本项目"最简单的脚手架工具搭建的react实现路由和状态机demo"正是基于`create-react-app`创建的，它展示了如何在React应用中集成路由管理和状态管理。首先，`create-react-app`是Facebook官方推出的用于创建React...

简单谈谈React中的路由系统

12-10

在这个例子中，`BrowserRouter`包裹整个应用，`Switch`组件会确保只渲染第一个匹配的`Route`，并且每个`Route`都有一个对应的组件来渲染。总的来说，React Router为React应用提供了强大的导航功能，使你可以根据...

React路由鉴权的实现方法

11-30

React路由鉴权是一个关键的安全特性，用于确保只有具有相应权限的用户才能访问特定的页面或功能。在React中，我们通常使用`react-router-dom`库来管理路由，而鉴权则可以通过多种方式实现，这里我们将讨论几种常见的...

React 路由懒加载的几种实现方案

10-17

总结来说，React路由懒加载可以通过`import()`、`require.ensure`以及第三方loader如`lazyload-loader`来实现。每种方法都有其特点，可以根据项目需求和个人喜好选择合适的方案。在选择懒加载策略时，需要注意平衡...

我的react练习，第一节

04-20

在本节React练习中，我们将深入探讨React.js的基础知识，这是一种流行的JavaScript库，用于构建用户界面，特别是单页应用程序（SPA）。React以其组件化、声明式编程风格和高效的虚拟DOM著称，是现代前端开发的重要...

大厂进阶之二：React高级用法HOC、Hooks对比、异步组件

最新发布

franktaoge的博客

08-10

1091

本文分文三部分： - HOC高阶组件 higher order component - Hooks 16.8版本后新增的钩子API，手写自定义hooks - 异步组件使用lazy和suspense两个api实现组件代码打包分割和异步加载

React 中的useRef 和 useTransition

越陌度阡

08-09

359

由于 React 会自动处理更新 DOM 以匹配你的渲染输出，因此你在组件中通常不需要操作 DOM。但是，有时你可能需要访问由 React 管理的 DOM 元素。例如，让一个节点获得焦点、滚动到它或测量它的尺寸和位置。在 React 中没有内置的方法来做这些事情，所以你需要一个指向 DOM 节点的 ref 来实现。 useRef 是一个 React Hook，它能帮助引用一个不需要渲染的值。

React+vite+antd点击路由切换时出现闪屏

阿宝的博客

08-09

305

React+vite+antd点击路由切换时出现闪屏

详细解释 React 组件的生命周期方法

久念☆的博客

08-07

1132

React 组件的生命周期方法可以分为三个主要阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting），以及错误处理阶段。每个阶段都有特定的生命周期方法，允许开发者在组件不同的生命周期时执行特定的操作和逻辑。

react路由安装与使用

05-18

React Router 是一个流行的 React 应用程序的路由库。它可以帮助你管理你的应用程序的不同页面之间的导航，从而使你的应用程序更加模块化和易于维护。安装 React Router：你可以使用 npm 或 yarn 来安装 React Router。使用 npm： ``` npm install react-router-dom ``` 使用 yarn： ``` yarn add react-router-dom ``` 使用 React Router：下面是一个简单的例子，展示了如何使用 React Router 在两个页面之间进行导航。 ```jsx import React from 'react'; import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function App() { return ( <Router> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> </ul> </nav> <Switch> <Route path="/about"> <About /> </Route> <Route path="/"> <Home /> </Route> </Switch> </div> </Router> ); } export default App; ``` 在这个例子中，我们定义了两个组件：Home 和 About。我们使用 Link 组件来创建两个链接，一个指向 Home 组件，另一个指向 About 组件。当用户点击这些链接时，React Router 会根据链接的路径来渲染相应的组件。我们使用 Switch 组件来包装 Route 组件，Switch 组件会在找到第一个匹配的 Route 组件后停止查找。这样可以确保我们只渲染一个组件。