React Router中使用history.push导航遇ESLint错误，无法跳转求助

你遇到的Unexpected use of 'history'错误，是因为ESLint的no-restricted-globals规则禁止直接使用全局history变量，同时React Router v6也不再推荐操作全局history对象，转而使用navigate函数实现路由跳转。下面是几种可行的解决办法：

方案1：转用函数组件（推荐） #

React Router v6对函数组件的支持更友好，用useNavigate钩子就能轻松实现跳转：

import { useState } from 'react';
import { Routes, Route, useNavigate } from 'react-router-dom';
import ListContacts from './ListContacts';
import CreateContact from './CreateContact';

function App() {
  const [contacts, setContacts] = useState(/* 填入你的初始联系人数据 */);
  const navigate = useNavigate();

  const createContact = (contact) => {
    // 这里写创建联系人的逻辑，比如更新状态
    setContacts([...contacts, contact]);
  };

  const removeContact = (contactId) => {
    // 写删除联系人的逻辑
    setContacts(contacts.filter(item => item.id !== contactId));
  };

  return (
    <div className="appName">
      <Routes>
        <Route path="/" element={
          <ListContacts
            contacts={contacts}
            deleteContact={removeContact}
          />
        } />
        <Route path="/create" element={
          <CreateContact
            onCreateContact={(contact) => {
              createContact(contact);
              navigate("/"); // 用navigate跳转首页
            }}
          />
        } />
      </Routes>
    </div>
  );
}

export default App;

方案2：给类组件封装withRouter高阶组件 #

如果不想改函数组件，可以自己写一个withRouter高阶组件，把navigate传递给类组件：

首先新建withRouter.js文件：

import { useNavigate, useParams } from 'react-router-dom';

const withRouter = (Component) => {
  const Wrapper = (props) => {
    const navigate = useNavigate();
    const params = useParams();
    return <Component {...props} navigate={navigate} params={params} />;
  };
  return Wrapper;
};

export default withRouter;

然后修改你的App组件：

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import withRouter from './withRouter';
import ListContacts from './ListContacts';
import CreateContact from './CreateContact';

class App extends React.Component {
  state = {
    contacts: [] // 填入初始联系人数据
  };

  createContact = (contact) => {
    // 写创建联系人的逻辑
    this.setState(prevState => ({
      contacts: [...prevState.contacts, contact]
    }));
  };

  removeContact = (contactId) => {
    // 写删除联系人的逻辑
    this.setState(prevState => ({
      contacts: prevState.contacts.filter(item => item.id !== contactId)
    }));
  };

  render(){
    const { navigate } = this.props;
    return(
      <div className="appName">
        <Routes>
          <Route path="/" element={
            <ListContacts
              contacts={this.state.contacts}
              deleteContact={this.removeContact}
            />
          }/>
          <Route path="/create" element={
            <CreateContact 
              onCreateContact={(contact)=>{
                this.createContact(contact);
                navigate("/"); // 使用props里的navigate跳转
              }}
            />
          }/>
        </Routes>
      </div>
    )
  }
}

export default withRouter(App);

方案3：在CreateContact组件内部处理跳转 #

直接在CreateContact组件里用useNavigate钩子，创建完成后直接跳转：

// CreateContact.js
import { useNavigate } from 'react-router-dom';

function CreateContact({ onCreateContact }) {
  const navigate = useNavigate();

  const handleCreate = (contact) => {
    onCreateContact(contact);
    navigate("/"); // 在这里跳转首页
  };

  // 组件其他逻辑，比如表单提交时调用handleCreate
  return (
    // 你的表单代码
  );
}

export default CreateContact;

这样父组件里就不用处理跳转逻辑，也避开了类组件获取路由导航的问题。

内容的提问来源于stack exchange，提问作者blocboyx