React Router 7框架模式下如何配置路径重定向

嘿，我刚好也碰到过类似的困惑！在React Router 7的这种配置式路由写法里，确实没有直接提供你预想的那种全局redirect()函数，但咱们有两种简单又靠谱的方式实现/info到/about的重定向：

• 方法一：用route搭配Navigate组件
  这是最直观的方式，咱们可以给/info路由绑定一个只做重定向的组件，直接用React Router内置的Navigate组件就行：

  import { Navigate } from "react-router-dom";
  
  export default [
    index("Home.tsx"),
    route("/about", "About.tsx"),
    // 新增的重定向配置
    route("/info", () => <Navigate to="/about" replace />),
  ] satisfies RouteConfig;
  

  这里的replace属性很重要，它会替换浏览器历史记录里的/info条目，用户点击返回按钮时不会回到/info，体验更顺畅。

• 方法二：用路由的loader函数实现重定向
  如果你不需要渲染任何组件，只是单纯的路径跳转，用loader函数会更简洁，这里要用到React Router提供的redirect()工具函数（注意这个是在loader/action里用的，和你一开始想的全局函数不是一回事）：

  import { redirect } from "react-router-dom";
  
  export default [
    index("Home.tsx"),
    route("/about", "About.tsx"),
    // 用loader做重定向
    route("/info", {
      loader: () => redirect("/about"),
    }),
  ] satisfies RouteConfig;
  

  这种方式会在路由匹配到/info时，直接触发重定向响应，浏览器自动跳转到/about。

其实React Router 7这么设计是为了让重定向逻辑更灵活——比如你还可以在重定向之前加一些判断逻辑，比如检查用户是否登录、是否有权限访问等，不管是在组件里还是loader里都能轻松实现。

内容来源于stack exchange