代码编织梦想

什么是路由?
一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component

下载react-router-dom: npm install --save react-router-dom

基本案例

app.jsx

import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Home from './component/Home'
import About from './component/About'

export default class App extends Component {
  render() {
    return (
      <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>React Router Demo</h2></div>
        </div>
      </div>
      
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
              <Link className="list-group-item" to="/about" >About</Link>
              <Link className="list-group-item" to="/home" >Home</Link>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
                <Route path="/about" component={About}/>
                <Route path="/home" component={Home}/>
            </div>
          </div>
        </div>
      </div>
    </div>
    )
  }
}

index.js

// 引入react 核心库
import React from 'react'
// 引入ReactDOM
// import ReactDOM from 'react-dom'
import ReactDOM from 'react-dom/client'
// 引入App
import App from './App'
// 渲染

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

// ReactDOM.render(<App/>,document.getElementById('root'))

ReactDOM.createRoot(
  document.getElementById('root')
).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/nolanElio/article/details/129631010

react路由笔记-爱代码爱编程

一、路由介绍 二、路由的基本使用 2.1使用步骤 1.安装:npm i react-router-dom -S / yarn add react-router-dom 2.导入路由的三个核心组件:Router / Route / Link import { BrowserRouter as Router, Router, Link} from ‘react

学习笔记——react路由配置-爱代码爱编程

react中的路由配置是react项目中一个重要的功能。通过配置好的路由,我们可以实现不同组件的切换,进而实现单页面应用程序。 1.书写组件:  配置路由之前,我们首先要书写一些需要的页面级组件。我们可以在项目的src目录下新建一个pages文件夹,在文件夹中,再为每个组件新建个文件夹,文件夹中新建index.jsx文件,组件文件夹的名

React学习笔记(二):React脚手架、React路由-爱代码爱编程

3、React应用(基于React脚手架) 1)、使用create-react-app创建react应用 1)react脚手架 react提供了一个用于创建react项目的脚手架库:create-react-app 项目的整体技术架构为:react+webpack+es6+eslint 2)创建项目并启动 第一步,全局安装:npm i -g c

【React】React学习笔记3(React路由、Ant Design)-爱代码爱编程

React学习笔记3(React路由、Ant Design) 零 l  说明一 l  React 路由基础(一)【了解】一些概念1、SPA(Single Page web Application 单页Web应用)2、路由3、路由组件与一般组件(二)效果图(三)< BrowserRouter > 与 < HashRouter >

react路由守卫(路由拦截)-爱代码爱编程

欢迎大家进群,一起探讨学习 微信公众号,每天给大家提供技术干货 博主技术笔记 博主网站地址1 博主网站地址2 博主开源微服架构前后端分离技术博客项目源码地址,欢迎各位star react不同于vue,通过在路由里设置meta元字符实现路由拦截。在使用 Vue ,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,

React路由(React学习笔记_09)-爱代码爱编程

React路由 1,路由基础 现代的前端应用大多都是SPA(单页应用程序),也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小,所以更受欢迎。为了有效的使用单个页面来管理原来多个页面的功能,前端路由应运而生。 1, 安装: yarn add react-router-dom 2, 导入路由的三个核心组件:Router/Ro

react路由封装-笔记记录-爱代码爱编程

1、首先创建项目 : npx create-react-app 项目名 2、在项目内下载路由插件: 在这里我下的是5版本,注意版本问题,有些版本不生效 npm i react-router-dom@5 -S 3、页面创建目录: 4、在routerConfig.js内封装一下路由。 import Model1 from "..

react_路由-学习笔记-爱代码爱编程

文章目录 1对SPA应用2路由的理解1 什么是路由?2 路由分类3前端路由的基础4 react-router-dom的理解4.1react-router-dom相关API5基本使用6路由组件和一般组件7封装NavLink组件8switch9解决样式丢失解决办法1方法2方法3总结10路由模糊匹配11 Redirect的使用12、向路由组件传递参数实例

React路由-前端(笔记整理)-爱代码爱编程

React路由的跳转依赖react-router-dom库,此库目前有两个版本:5---主流;6---11月份刚发布,要求react的版本必须大于16. 要想实现React路由的跳转离不开三个条件:  一、路由模式组件:必须有一个路由模式包裹整个应用,一个React应用只需要使用一次。 浏览器的路由模式有两个: 1、HashRouter:使用URL

React路由管理学习笔记-爱代码爱编程

学习老师课程后,部分记录、方便记忆 所谓路由管理,就是让你的页面能够根据 URL 的变化进行页面的切换,这是前端应用中一个非常重要的机制。 主要体现在两个方面。 一方面,路由机制提供了按页面去组织整个应用程序的能力,页面之间的交互可以主要通过 URL 来进行,从而可以让各个业务功能互相独立,实现逻辑的解耦。 另一方面,URL 的全称是 _Unifo

React学习笔记---React路由(v5带部分v6)-爱代码爱编程

React路由 一、SPA的理解二、路由的理解三、react-router-dom1、理解2、相关API四、路由的基本使用五、NavLink的使用(v5和v6有区别)六、对NavLink二次封装七、Switch的使用(v6已经移除switch,替换为Routes)八、解决多级路径刷新页面样式丢失的问题九、路由的严格匹配与模糊匹配十、Redirect

React路由笔记-爱代码爱编程

1.Link组件 属于路由组件。 导航区: <Link to="/xxxxx">Demo</Link> 展示区写Route标签进行路径的匹配 <Route path='/xxxx' component={Demo}/>这个component要小写 2.NavLink使用与封装 NavLink可以实现路由连

React笔记(七) React路由-爱代码爱编程

React笔记(七) 1.React路由理解 React实现的是SPA应用,即单页Web页面,整个应用中只有一个完整的页面,点击页面中的链接也不会刷新页面,只会对页面进行局部的刷新。因此在更换页面时需要使用路由实现。 路由就是一个键值对映射关系,键为访问路径,值为函数或者是组件,后端路由代表的是函数,用来处理不同的请求,前端路由代表的则是组件或页面

React学习笔记之React路由-爱代码爱编程

1.路由介绍 2.路由的基本使用 配置路由是注意版本匹配 1)安装路由 yarn add react-router-dom 2)导入组件 3.常用组件的说明 1)Router组件:包裹整个作用,一个React应用只需使用一次Router  2)Link组件:用于指定导航链接(a标签) 导航菜单,点击link就相当于点击导航

react路由6.0使用笔记_派大星965的博客-爱代码爱编程

基本使用 1. 首先安装依赖 npm i react-router-dom 2. 引入实现路由所需的组件,以及页面组件 注意: BrowserRouter 组件最好放在最顶层所有组件之外,确保内部组件使用link做路由跳转时不出错 import { BrowserRouter, Route, Routes } from

react路由6总结_月色失衡的博客-爱代码爱编程

文章目录 目录 文章目录 前言 1.一级路由 2.重定向 3.NavLink高亮 4.useRoutes() 5.嵌套路由 6.<outer> 7.函数组件params参数的使用 使用useParams() 8.函数式组件search参数 useSearchParams() 9. us

react笔记-爱代码爱编程

目录 什么叫做路由?路由组件与一般组件区别react中配置路由[1] 下载[2] 注册路由SwitchRoute组件的三个互斥属性componentrenderchildren [3] 导航区(

react路由配置_react 配置路由-爱代码爱编程

1:安装路由v6版本 npm i react-router-dom -S 2:创建路由目录 3:配置路由 然后引用配置路由 配置子路由的时候要引用Qut