React-dom使用JS跳转

业务中需要对数据进行一系列的操作之后才自动跳转页面,这样就不能用,需要使用JS跳转

1. 安装history
npm install --save history // 因为history被拆分了,所以需要另外安装
2. 创建一个history实例
  • 新建 history.js文件,写入
import { createBrowserHistory } from 'history';

export default createBrowserHistory();
  • 这里就是创建了一个history实例,之后的跳转和router的history属性都要引用
3. 给传入history
  • 的引用文件中
import React from 'react'
// 引入Router,而不是browserRouter
import { Router} from 'react-router-dom' 
import Container from './components/container/container'
import history from './config/history' // 引入history实例

function App () {
  return   // history传参
    
  
}
export default App

4.在需要跳转功能的组件中

import React from 'react'
import history from '../config/history' // 引入history实例


async function edit (record) {
    console.log(record)
    history.push('/cost/add') // 使用push跳转
  }

你可能感兴趣的:(React-dom使用JS跳转)