React路由配置：如何让单个路由不使用basename？

这个需求特别常见，比如对接OAuth第三方登录时，回调地址往往是根路径下的/callback，没法带上全局的basename。其实React Router本身就支持这种场景，我给你两种实用的实现方式：

方式一：给目标路由使用绝对路径 #

当你在全局的BrowserRouter（或HashRouter）设置了basename后，只要把不需要该前缀的路由的path以/开头，它就会自动忽略全局的basename，直接匹配根路径下的地址。

举个具体的代码例子：

// 全局路由配置，设置了basename="/my-app"
<BrowserRouter basename="/my-app">
  <Routes>
    {/* 这些路由会自动带上/my-app前缀，比如访问/my-app/home */}
    <Route path="/home" element={<HomePage />} />
    <Route path="/profile" element={<UserProfile />} />
    
    {/* 这个路由会直接匹配根路径下的/callback，不会带上/my-app */}
    <Route path="/callback" element={<AuthCallback />} />
  </Routes>
</BrowserRouter>

跳转时的注意事项 #

如果需要跳转到/callback页面，不管用Link组件还是useNavigate钩子，同样要使用绝对路径：

// 使用Link跳转
<Link to="/callback">前往授权回调页</Link>

// 使用useNavigate跳转
import { useNavigate } from 'react-router-dom';

const SomeComponent = () => {
  const navigate = useNavigate();
  const goToCallback = () => {
    navigate("/callback");
  };
  return <button onClick={goToCallback}>跳转回调页</button>;
};

方式二：单独为回调路由创建不带basename的Router #

如果你的回调路由逻辑比较独立，也可以单独用一个不带basename的Router组件包裹它，和全局路由并行放置：

// 全局带basename的路由
<BrowserRouter basename="/my-app">
  <Routes>
    <Route path="/home" element={<HomePage />} />
    <Route path="/profile" element={<UserProfile />} />
  </Routes>
</BrowserRouter>

// 单独的回调路由，不带basename
<BrowserRouter>
  <Routes>
    <Route path="/callback" element={<AuthCallback />} />
  </Routes>
</BrowserRouter>

这种方式适合回调页面完全独立于主应用路由体系的场景，不过要注意两个Router会各自维护自己的路由状态，一般第一种方式就足够应付大部分情况了。

额外提醒：服务器配置 #

如果你的应用是SPA（单页应用），别忘了在服务器端（比如Nginx、Apache）配置，确保/callback的请求能正确转发到你的React应用的index.html，否则会出现404错误。

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