二、【React-Router6】一级路由 Routes + Route

如果遇到控制台报如下警告，可点击访问 react 18 的 createRoot

项目修改自二、【React-Router5】路由的基本使用的 Demo
这里需要注意的变化
- <Switch> 变成了 <Routes> 且必写，功能不变
CODE（App.js）

import React from 'react'
import { NavLink, Routes, Route } from 'react-router-dom'
import About from './components/About'
import Home from './components/Home'export default function App() {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h1>React Router Demo</h1></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group" style={{ whiteSpace: 'pre-wrap' }}><NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body" style={{ whiteSpace: 'pre-wrap' }}><Routes><Route path='/about' element={<About />} /><Route path='/home' element={<Home />} /></Routes></div></div></div></div></div>)
}

Result

二、【React-Router6】一级路由 Routes + Route相关推荐

react 按照一级路由分包加载
按需加载一开始整个项目只有一个bundle.js,压缩之后达到了4M.导致首屏加载速度很慢,需要优化. 方案优化包大小,从业务角度出发,抽离重复的业务组件,避免大规模的90%相似度代码.需要对业务 ...
React动画和路由
1.过渡动画 React并没有提供过渡动画操作,组件的过渡动画需要依赖第三方模块:transition 安装 yarn add react-transition-group 单元素过渡动画 impor ...
React中的路由react-router
Router 的基本使用! 我们需要npm 下载react-router: npm install react-router --save BrowserRouter或HashRouter Route ...
React学习：路由定义及传参、数据复用-学习笔记
文章目录 React学习:路由定义及传参.数据复用-学习笔记在React中使用react-router-dom路由简单例子路由定义及传参 React学习:路由定义及传参.数据复用-学习笔记在R ...
华为路由交换由浅入深系列（二）：静态路由、浮动路由、默认路由配置以及华为路由协议优先级总结
掌握目标一.配置设备名称与IP地址: 二.配置静态路由三.配置浮动路由用于备份四.配置默认路由五.了解华为不同路由协议的优先级拓扑一.配置设备名称与IP地址: R1: system-vie ...
React配置默认路由
将一个匹配所有路由写在最下面,这样匹配时找不到指定的路由就会找到最后一条.匹配不到也不会报错,但是会报一个警告. /* React v6 */ <Routes><Route path ...
React 过渡动画路由 ui
过渡动画下载react-transition-group cnpm i react-transition-group --save CSSTransition实现单元素过渡动画 (1) unmoun ...
有关于路由的基础使用（一级路由和二级路由）
一.路由 1.定义 node中的路由:web服务器根据用户输入的不同url地址,来返回不同的页面. vue中路由:路由是vue.js中的一个路由组件,需要结合组件来实现单页面应用. 2.路由的使用(一 ...
从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...

二、【React-Router6】一级路由 Routes + Route

二、【React-Router6】一级路由 Routes + Route相关推荐

最新文章

热门文章