ReactJS中点击按钮重定向至./createadd.js的实现方案求助

看起来你遇到的问题主要有两个核心点：没有正确配置React Router的路由容器，以及类组件无法直接获取到history对象。下面我一步步帮你解决：

1. 先确保安装并配置React Router的基础容器 #

首先，如果你还没安装react-router-dom，先执行安装命令：

npm install react-router-dom
# 或者用yarn
yarn add react-router-dom

然后找到你的项目入口文件（通常是index.js），用BrowserRouter把整个App包裹起来——这是React Router生效的前提：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

2. 根据React Router版本适配跳转逻辑 #

如果你用的是React Router v5（较旧版本） #

类组件本身不会自动接收路由相关的props，需要用withRouter高阶组件包裹你的App组件，这样才能拿到history对象：

修改你的App.js：

import React from 'react';
import { withRouter } from 'react-router-dom';

class App extends React.Component {
  // 注意：不要把函数定义在render里，render会多次执行，每次都会重新创建函数，影响性能
  selladd = () => {
    // 这里跳转的是路由路径，不是js文件路径！
    // 你需要先配置对应的路由，把路径映射到你的createadd组件
    this.props.history.push('/createadd');
  }

  render(){
    return (
      <div style={{position: "absolute", left: 1300, top: 25, overflowX: "hidden"}}>
        <button onClick={this.selladd}>Sell</button>
      </div>
    );
  }
}

// 用withRouter包裹组件，注入路由相关props
export default withRouter(App);

接下来还要配置路由映射，比如在App里或者单独的路由组件中添加：

import { Route, Switch } from 'react-router-dom';
import CreateAdd from './createadd'; // 导入你的createadd组件

// 在App的render方法中添加路由配置（或者单独做一个路由组件）
render() {
  return (
    <>
      <div style={{position: "absolute", left: 1300, top: 25, overflowX: "hidden"}}>
        <button onClick={this.selladd}>Sell</button>
      </div>
      <Switch>
        <Route path="/createadd" component={CreateAdd} />
      </Switch>
    </>
  )
}

如果你用的是React Router v6（最新版本） #

v6移除了withRouter，更推荐使用函数组件+hooks的方式。如果你愿意把类组件改成函数组件，代码会更简洁：

修改后的App.js：

import React from 'react';
import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();

  const selladd = () => {
    navigate('/createadd');
  }

  return (
    <div style={{position: "absolute", left: 1300, top: 25, overflowX: "hidden"}}>
      <button onClick={selladd}>Sell</button>
    </div>
  );
}

export default App;

对应的v6路由配置要用Routes和Route：

import { Routes, Route } from 'react-router-dom';
import CreateAdd from './createadd';

// 在入口文件或者路由组件中配置
<Routes>
  <Route path="/createadd" element={<CreateAdd />} />
  <Route path="/" element={<App />} />
</Routes>

关键注意点 #

• 不要直接跳转到./createadd.js文件！React Router是基于路由路径映射到组件的，你需要先导入createadd组件，然后配置路径和组件的对应关系。
• 确保所有需要使用路由功能的组件都在BrowserRouter的包裹范围内，否则无法获取路由相关的对象。

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