React-router-dom中如何通过继承Props实现goBack()跨文件调用

我来帮你梳理下完整的实现步骤，完美匹配你的需求——把路由单独存放、不在按钮组件里导入React Router，而是通过App.js传递功能：

1. 单独存放路由配置（仅此处导入React Router） #

先创建一个RoutesConfig.js文件，专门用来定义你的路由结构，这里是唯一需要导入react-router-dom的地方：

// RoutesConfig.js
import { Routes, Route } from 'react-router-dom';
// 导入你的页面组件
import HomePage from './pages/HomePage';
import DetailPage from './pages/DetailPage';

export const AppRoutes = () => {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/detail" element={<DetailPage />} />
      {/* 其他路由... */}
    </Routes>
  );
};

2. 在App.js中封装goBack并传递给子组件 #

因为你用了类组件写法，我分两种Router版本给你适配：

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

v6里类组件不能直接用useNavigate，所以我们用一个函数组件做包裹层，把导航方法传递给App类组件：

// App.js
import React from 'react';
import { BrowserRouter, useNavigate } from 'react-router-dom';
import { AppRoutes } from './RoutesConfig';
import YourButtonComponent from './YourButtonComponent';

// 用函数组件获取navigate，再传给类组件App
const AppWrapper = () => {
  const navigate = useNavigate();
  
  // 封装goBack方法
  const goBack = () => {
    navigate(-1);
  };

  return <App goBack={goBack} />;
};

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        {/* 把goBack方法通过props传给按钮组件 */}
        <YourButtonComponent goBack={this.props.goBack} />
        <AppRoutes />
      </BrowserRouter>
    );
  }
}

export default AppWrapper;

如果你用的是React Router v5及以下 #

直接用withRouter高阶组件给App类组件注入history对象，然后封装goBack：

// App.js
import React from 'react';
import { BrowserRouter, withRouter } from 'react-router-dom';
import { AppRoutes } from './RoutesConfig';
import YourButtonComponent from './YourButtonComponent';

class App extends React.Component {
  constructor(props) {
    super(props);
    // 绑定this，补全你之前未写完的代码
    this.goBack = this.goBack.bind(this);
  }

  goBack() {
    // 调用history的goBack方法
    this.props.history.goBack();
  }

  render() {
    return (
      <BrowserRouter>
        <YourButtonComponent goBack={this.goBack} />
        <AppRoutes />
      </BrowserRouter>
    );
  }
}

// 用withRouter包裹，让App能拿到history props
export default withRouter(App);

3. 在按钮组件中使用传递来的goBack #

现在你的按钮组件（比如YourButtonComponent.js）完全不需要导入react-router-dom，直接用props里的方法就行：

// YourButtonComponent.js
import React from 'react';

// 类组件版本
class YourButtonComponent extends React.Component {
  render() {
    return (
      <button onClick={this.props.goBack}>
        返回上一页
      </button>
    );
  }
}

// 如果你用函数组件，写法更简单：
// const YourButtonComponent = ({ goBack }) => {
//   return <button onClick={goBack}>返回上一页</button>;
// };

export default YourButtonComponent;

额外优化：全局共享导航功能（多组件需要时用） #

如果你的项目里很多组件都需要返回功能，一个个传props太麻烦，可以用Context来全局共享：

1. 创建NavigationContext.js：

// NavigationContext.js
import React, { createContext, useContext, useNavigate } from 'react-router-dom';

const NavigationContext = createContext();

export const NavigationProvider = ({ children }) => {
  const navigate = useNavigate();
  const goBack = () => navigate(-1);

  return (
    <NavigationContext.Provider value={{ goBack }}>
      {children}
    </NavigationContext.Provider>
  );
};

export const useNavigation = () => useContext(NavigationContext);

2. 在AppWrapper里包裹：

// AppWrapper.js
import { BrowserRouter } from 'react-router-dom';
import { NavigationProvider } from './NavigationContext';
import { AppRoutes } from './RoutesConfig';
import YourButtonComponent from './YourButtonComponent';

const AppWrapper = () => {
  return (
    <BrowserRouter>
      <NavigationProvider>
        <YourButtonComponent />
        <AppRoutes />
      </NavigationProvider>
    </BrowserRouter>
  );
};

export default AppWrapper;

3. 按钮组件直接用hook：

// YourButtonComponent.js
import { useNavigation } from './NavigationContext';

const YourButtonComponent = () => {
  const { goBack } = useNavigation();
  return <button onClick={goBack}>返回上一页</button>;
};

export default YourButtonComponent;

这样不管多少组件需要返回功能，都不用重复传props，也不用导入React Router~

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