react vite react-router-dom 使用useRoutes 非根目录打包的问题

最近使用react+ts+vite进行打包，用到vite非根目录打包到nginx白屏的问题。

开始以为是vite的锅，配置半天vite.config.ts 中的base，也不好使，最后发现是react-router-dom中的useRoutes v6版本的锅。

下面为我的解决方案，比如我nginx的非根目录为/test-react，首先将vite.config.ts中的base设置 base:'/test-react/'，

之前的代码

 return (
    <ConfigProvider locale={getAntdLocale()} componentSize="middle">
      <IntlProvider locale={locale.split('-')[0]} messages={getLocale()}>
        <BrowserRouter>
          <RenderRouter />
        </BrowserRouter>
      </IntlProvider>
    </ConfigProvider>
  );

然后将useRoutes相关的更改为以下代码：

 return (
    <ConfigProvider locale={getAntdLocale()} componentSize="middle">
      <IntlProvider locale={locale.split('-')[0]} messages={getLocale()}>
        <BrowserRouter basename={import.meta.env.BASE_URL}>
          <RenderRouter />
        </BrowserRouter>
      </IntlProvider>
    </ConfigProvider>
  );

加了一个参数 basename={import.meta.env.BASE_URL} 搞定