如何在React Router中排除basename进行重定向？

问题场景 #

你已为React Router设置了basename: '/app'：

const router = createBrowserRouter(routes, { basename: '/app' });

在根loader中返回redirect('/login')时，React Router会自动拼接basename，跳转到/app/login，但你需要跳转到独立应用的根路径/login。

解决方法 #

方法1：使用完整绝对URL重定向 #

直接传入包含域名的完整地址，React Router不会自动拼接basename：

export async function loader() {
  const session = await get(session);
  if (!session) {
    // 替换为独立应用的实际完整URL
    return redirect('https://your-domain.com/login');
  }
  return session;
}

方法2：同域名下构造根路径 #

如果两个应用在同一域名下，利用window.location.origin动态拼接根路径，避免硬编码域名：

export async function loader() {
  const session = await get(session);
  if (!session) {
    return redirect(`${window.location.origin}/login`);
  }
  return session;
}

方法3：直接使用浏览器原生跳转 #

完全绕过React Router的路由逻辑，通过原生API跳转：

export async function loader() {
  const session = await get(session);
  if (!session) {
    window.location.href = '/login';
    return null; // loader必须返回值，这里返回占位值
  }
  return session;
}

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