Import () loading common components problem?

import () can split the code and reduce packaging. For example, two large components (pages) AMagi B both need public button.js, so how to introduce the A page into button and leak it to the app.js,app configuration router corresponding to the corresponding component page.

import React from "react";
import ReactDOM from "react-dom";
import { useState, useEffect } from "react";

async function run() {
  let v= await import("./button");
  let Button=v.button-mid
 ..
 ..
  let A = () => {
    return (
      <div>
       ...
       ...
        <Button onClick={d}/>
      </div>
    );
  };
 // const rootElement = document.getElementById("root");
 // ReactDOM.render(<A />, rootElement);
}
run();

how does the A component export for app.js to use (configure routing), or is my page built wrong.

May.25,2022
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b39513-e6d3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b39513-e6d3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?