React——react-router-dom V6 使用

1. 安装依赖

cnpm i -S react-router-dom@6

2. react-router-dom V6 属性：BrowserRouter 、Routes 、Route、Link .

import {BrowserRouter, Routes, Route, Link } from "react-router-dom"
function Index(){return <div><BrowserRouter><Routes><Route path="/" element={<Link to="/page2">link</Link>} /><Route path="/page1" element={<Page1/>}/><Route path="/page2" element={<Page2/>}/></Routes></BrowserRouter></div>
}

3. 编程式跳转：useNavigate

1.必须在函数组件内使用
2.如果想要在类组件内使用，可以在外包装一层函数组件

函数组件使用

import {BrowserRouter, Routes, Route , useNavigate} from "react-router-dom"
function Index(){return <div><BrowserRouter><Routes><Route path="/" element={<Button/>} /><Route path="/page1" element={<Page1/>}/><Route path="/page2" element={<Page2/>}/></Routes></BrowserRouter></div>
}function Button(){const navigate = useNavigate()return <button onClick={()=>navigate("/page2")}>编程式跳转</button>
}

类组件使用

//Index.js
import {BrowserRouter, Routes, Route } from "react-router-dom"
class Index extends React.Component{render() {return (<div><BrowserRouter><Routes><Route path="/page1" element={<NavigateComponent element={Page1} />} /><Route path="/page2" element={<NavigateComponent element={Page2} />} /></Routes></BrowserRouter></div>);}
}

/*NavigateComponent.js*/
import {useNavigate} from "react-router-dom"
function NavigateComponent(props){const navigate = useNavigate()return <div><props.element navigate={navigate} /></div>
}

//Page1.js
class Page1 extends React.Component{render() {return <div>page1<button onClick={this.handleTo}>跳转2</button></div>}handleTo =()=>{this.props.navigate("/page2")}
}

React——react-router-dom V6 使用相关推荐

React Router 升级 v6: Redirect 重定向替代方案
React Router 升级 v6: Redirect 重定向替代方案文章目录 React Router 升级 v6: Redirect 重定向替代方案 React Router v6 Redir ...
JavaScript是如何工作的：编写自己的Web开发框架 + React及其虚拟DOM原理
摘要: 深入JS系列19. 原文:JavaScript是如何工作的:编写自己的Web开发框架 + React及其虚拟DOM原理作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门 ...
[react] react怎么拿到组件对应的DOM元素？
[react] react怎么拿到组件对应的DOM元素? 在Class组件中 import React from 'react'; class CComponent extends React.Com ...
[react] React中怎么操作虚拟DOM的Class属性
[react] React中怎么操作虚拟DOM的Class属性 render() { this.debug('render ....'); this.components.push(<Atten ...
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile
一.通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目,可以看到 ...
【React+TS】从零开始搭建react+typescript+router+redux+less+pxToVw自适应+sass+axios反向代理+别名@+Antd-mobile
一.通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目,可以看 ...
歌谣学前端之React中虚拟dom
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的 ...
react：react + dva + router + roadhog 基础项目搭建
一.脚手架安装第一步:全局安装 dva,这里有个条件,node 版本要 >= 6.5 且 dva-cli 版本要在 0.7x. npm install dva-cli -g 第二步:查看版本号 ...
React飞行日记(七) - 在React中使用DOM操作
×在React中使用DOM操作 React中很少直接用到DOM操作, 因为所有的功能都可以基于数据驱动来完成, DOM是框架帮我们做的事情, 但是也有些喜欢用DOM操作的开发者, 那么看看如何在Rea ...
【学习笔记】React+React全家桶学习笔记
文章目录 1 为什么要使用React 2 React的定义 3 React的三大特性 4 React入门 4.1 hello_react 4.2 虚拟DOM的创建 4.3 JSX 4.4 模块与组件, ...

React——react-router-dom V6 使用

React——react-router-dom V6 使用相关推荐

最新文章

热门文章