React-router-dom 6.2.1配置

.env
设置部署目录前缀

REACT_APP_PBLICK_PATH= /test

index.ts
BrowserRouter 为history模式，部署到服务器上如果不是根目录需要配置basename

const basename = process.env.REACT_APP_PBLICK_PATH;
  <BrowserRouter basename={basename}>
    <App />
  </BrowserRouter>

App.tsx

function App(): React.ReactElement<any> {
  const flag = useDirection()
  let routes: RouteObject[] = [
    {
      path: "/",
      children: [
        {
            index: true,
            element: <Faq flag={flag} />
        },
        {
          path: "/faq-detail/:id",
          element: <FaqDetail />,
        },
        {
            path: "/faq-list/:id",
            element:  <FaqListTransferStation />,
        },
        { path: "*", element: <ErrorBlock status='default' /> }
      ]
    }
  ];
  let element = useRoutes(routes);

  return (
      <div className="app-container">
        <ErrorBoundary fallbackRender={()=><ErrorBlock status='default' />}>
            <main className="main">
                {element}
            </main>
        </ErrorBoundary>
      </div> 
  );
}

config-overrides.js
配置资源访问的前缀路径，与REACT_APP_PBLICK_PATH 保持一致

const path = require("path");
const {
  override,
  setWebpackPublicPath
} = require("customize-cra");
module.exports = override(
  setWebpackPublicPath(process.env.REACT_APP_PBLICK_PATH),
);