React Router v6如何让父路由/checkout不可访问？

针对你的需求，有两种更可靠的实现方式，比直接判断window.location更符合React Router的设计逻辑：

方法一：添加index路由实现默认重定向 #

直接在父路由下配置index路由，当访问/checkout时自动重定向到指定子路由，这是最推荐的方案：

import { Route, Navigate } from 'react-router-dom';

// 修改后的路由配置
<Route path="/checkout" element={<CheckoutLayout />} >
  {/* 父路由默认重定向到payment页面 */}
  <Route index element={<Navigate to="payment" replace />} />
  <Route path="shipment" element={<ShipmentPage />} />
  <Route path="payment" element={<PaymentPage />} />
</Route>

• index路由是父路由的默认子路由，当用户访问/checkout时会自动匹配这个路由
• replace属性可以避免在浏览器历史记录中留下/checkout的条目，优化用户的回退体验

方法二：在布局组件中通过路由钩子判断重定向 #

如果需要在组件层面做逻辑判断，不要用原生的window.location，改用React Router提供的useLocation钩子，它能准确获取当前路由路径：

import { Navigate, useLocation, Outlet } from 'react-router-dom';

export const CheckoutLayout = () => {
  const location = useLocation();

  // 仅当路径严格等于/checkout时重定向
  if (location.pathname === '/checkout') {
    return <Navigate to="/checkout/payment" replace />;
  }

  return (
    <div>
      {/* 这里是你的布局内容，比如步骤导航栏等 */}
      <Outlet /> {/* 必须保留Outlet，否则子路由页面无法渲染 */}
    </div>
  );
};

• 注意：布局组件必须包含<Outlet />，否则子路由的内容不会显示
• useLocation是React Router的官方API，能和路由系统同步，比原生window.location更可靠，避免因域名、查询参数等导致的判断错误

你之前的代码存在的问题 #

1. window.location.href是完整的URL（包含域名、协议等），硬写url/checkout很容易匹配失败
2. 布局组件中没有添加<Outlet />，导致子路由页面无法正常渲染

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