如何配置refine框架适配子目录部署生成正确URL

refine的路由依赖于底层路由库（如react-router-dom、Next.js Router），只需在路由根配置中添加子目录前缀，就能让refine生成带子目录的URL，具体分场景处理：

基于react-router-dom的项目 #

在包裹<Refine>组件的<BrowserRouter>中设置basename属性，值为你的子目录路径：

import { Refine } from "@refinedev/core";
import { routerBindings, BrowserRouter } from "@refinedev/react-router-v6";

function App() {
  return (
    <BrowserRouter basename="/subfolder">
      <Refine
        routerProvider={routerBindings}
        // 你的其他项目配置
      />
    </BrowserRouter>
  );
}

配置后，refine生成的所有路由（如/login、/dashboard）都会自动带上/subfolder前缀，变成/subfolder/login这类路径。

基于Next.js的项目 #

1. 先修改next.config.js，添加basePath配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/subfolder',
}

module.exports = nextConfig

2. 项目中refine的路由会自动适配这个basePath，无需额外修改<Refine>组件的配置。如果有自定义路由跳转，直接使用Next.js的useRouter即可，它会自动处理前缀。

其他路由适配器场景 #

如果使用Remix等其他路由方案，原理一致：在路由根配置中设置子目录前缀，refine会基于底层路由的配置生成正确的URL路径。

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