基于类的React组件渲染及React Router嵌入元素技术问询

嘿，让我一步步帮你解决这两个React相关的问题：

在类组件里使用React Router，核心是获取路由相关的能力（比如跳转、读取路由参数），不同版本的React Router实现方式略有区别：

• React Router v5 及更早版本：
  最常用的方式是用withRouter高阶组件包裹你的类组件，这样组件就能拿到history、match、location这些路由props了。举个实际例子：

  import { withRouter } from 'react-router-dom';
  import React from 'react';
  
  class Profile extends React.Component {
    goToSettings = () => {
      // 利用history对象跳转到设置页面
      this.props.history.push('/settings');
    };
  
    render() {
      // 从match.params里读取路由参数
      const userId = this.props.match.params.id;
      return (
        <div className="profile">
          <h2>用户ID: {userId}</h2>
          <button onClick={this.goToSettings}>去设置页</button>
        </div>
      );
    }
  }
  
  // 一定要用withRouter包裹后再导出
  export default withRouter(Profile);
  

  如果你已经在路由配置里直接使用这个组件（比如<Route path="/profile/:id" component={Profile} />），那它会自动接收路由props，不需要额外用withRouter。

• React Router v6+ 版本：
  v6移除了官方的withRouter，但你可以自己封装一个简单的高阶组件，把hooks的能力传递给类组件：

  import { useNavigate, useParams } from 'react-router-dom';
  import React from 'react';
  
  // 自定义HOC，把路由hooks的结果传给类组件
  const withRouter = (Component) => {
    const Wrapper = (props) => {
      const navigate = useNavigate();
      const params = useParams();
      return <Component {...props} navigate={navigate} params={params} />;
    };
    return Wrapper;
  };
  
  class Profile extends React.Component {
    goToSettings = () => {
      this.props.navigate('/settings');
    };
  
    render() {
      const userId = this.props.params.id;
      return (
        <div className="profile">
          <h2>用户ID: {userId}</h2>
          <button onClick={this.goToSettings}>去设置页</button>
        </div>
      );
    }
  }
  
  export default withRouter(Profile);
  

  另外要注意，你的类组件必须被包裹在<BrowserRouter>（或其他路由上下文组件）内部，否则路由相关的props和hooks都无法正常工作。

首先，先确保你的类组件是标准的React类组件结构，比如：

import React from 'react';

class MyCustomComponent extends React.Component {
  render() {
    return (
      <div className="custom-component">
        <p>这是我的类组件内容！</p>
      </div>
    );
  }
}

export default MyCustomComponent;

要把这个组件注入到页面上已存在的某个div（而不是替换整个页面），你需要用ReactDOM的渲染方法，指定目标div作为挂载容器：

• React 17 及更早版本：使用ReactDOM.render

  import React from 'react';
  import ReactDOM from 'react-dom';
  import MyCustomComponent from './MyCustomComponent';
  
  // 找到页面上已经存在的目标div，比如它的id是"inject-here"
  const targetDiv = document.getElementById('inject-here');
  
  // 把组件渲染到这个div里，不会影响页面其他内容
  ReactDOM.render(<MyCustomComponent />, targetDiv);
  

• React 18+ 版本：推荐使用createRoot

  import React from 'react';
  import { createRoot } from 'react-dom/client';
  import MyCustomComponent from './MyCustomComponent';
  
  const targetDiv = document.getElementById('inject-here');
  const root = createRoot(targetDiv);
  root.render(<MyCustomComponent />);
  

关键注意点：

• 目标div必须在页面的HTML中提前存在（比如在静态HTML里写好<div id="inject-here"></div>）
• 不要把组件渲染到整个页面的根容器（比如常见的id="root"的div），除非你确实想替换整个页面的内容。

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