惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

aimingoo的专栏
aimingoo的专栏
雷峰网
雷峰网
博客园 - 叶小钗
V
V2EX
博客园 - Franky
博客园_首页
小众软件
小众软件
Microsoft Security Blog
Microsoft Security Blog
The GitHub Blog
The GitHub Blog
A
About on SuperTechFans
H
Hackread – Cybersecurity News, Data Breaches, AI and More
阮一峰的网络日志
阮一峰的网络日志
WordPress大学
WordPress大学
Blog — PlanetScale
Blog — PlanetScale
J
Java Code Geeks
T
The Blog of Author Tim Ferriss
U
Unit 42
Microsoft Azure Blog
Microsoft Azure Blog
月光博客
月光博客
S
SegmentFault 最新的问题
B
Blog RSS Feed
博客园 - 【当耐特】
D
Docker
N
Netflix TechBlog - Medium

liaooo

Vue3自动导入常用api – liaooo Vue3自定义组件名字 – liaooo Vue+ts使用animate.css – liaooo uni-app中flyio的使用 – liaooo 【开源】查看网站在不同设备的预览效果 – liaooo Pinia的使用 – liaooo craco配置postcss不生效 – liaooo Vite配置preprocessorOptions全局引入less – liaooo 监听Pinia仓库中的数据变化 – liaooo
react-router在组件外操作路由 – liaooo
liao · 2023-07-09 · via liaooo

思路:创建可供组件外部使用的 history 对象

步骤

  1. 创建 utils/history.ts,在里面创建一个 history 对象并导出
  2. App.tsx 中使用 Router 组件来替代 BrowserRouter,并将外部 history 对象关联到 Router

utils/history.ts

import { createBrowserHistory } from 'history'

const history = createBrowserHistory()

export default history

App.tsx

import { Router, Redirect, Route } from 'react-router-dom'
import history from './utils/history'

<Router history={history}>

使用

import history from './utils/history' // 导入history对象
history.push('/home') // 跳转路由