如何确保在 @tanstack/react-router 中应用具有身份验证重定向的管理布局

Question

我正在使用 @tanstack/react-router 开发一个项目，我需要保护我的管理页面。我决定使用布局将身份验证限制应用于管理文件夹的所有子文件夹。设置如下：

对于位于 paths/admin/_layout.tsx 的管理布局，我实施了一项检查以将未经身份验证的用户重定向到登录页面：

import {Outlet, createFileRoute, redirect} from '@tanstack/react-router';

export const Route = createFileRoute('/admin/_layout')({
  beforeLoad: async ({context, location}) => {
    if (!context.auth.isLogged()) {
      throw redirect({
        to: '/auth/login',
        search: {
          redirect: location.href,
        },
      });
    }
  },
  component: () => (
    <div style={{backgroundColor: 'red'}}>
      <Outlet />
    </div>
  ),
});

这是位于routes/admin/index.tsx的管理页面：

import {createFileRoute} from '@tanstack/react-router';

export const Route = createFileRoute('/admin/')({
  component: Index,
});

function Index() {
  return (
    <div className="p-2">
      <h3>Welcome Home!</h3>
    </div>
  );
}

为了测试布局是否正常工作（独立于重定向逻辑），我添加了红色背景颜色。然而，根据测试，布局本身似乎没有被渲染。

任何人都可以提供有关为什么布局未应用于我的管理页面的建议吗？我使用 createFileRoute 或布局设置本身的方式有问题吗？

Answer 1

但是，我们可以对您的代码进行一些调整和改进：

1. 处理布局和受保护的路线

2. 重定向未经身份验证的用户

3. 关注点分离

   // 路线/admin/_layout.tsx 从'@tanstack/react-router'导入{Outlet，createFileRoute，redirect}；

   导出 const AdminLayout = ({ context, Children }) => { // 在渲染任何子路由之前确保身份验证 if (!context.auth.isLogged()) { 抛出重定向（{ 到：'/auth/login'， 搜索： { 重定向：location.href， }, }); }

   // 使用子路由渲染布局 返回 （

   ）； };

   导出 const AdminLayoutRoute = createFileRoute('/admin/_layout')({ 组件：管理布局， });

   //路由/admin/index.tsx 从 '@tanstack/react-router' 导入 { createFileRoute };

   导出 const AdminIndexRoute = createFileRoute('/admin/')({ 组成部分：索引， });

   函数索引() { 返回 （

   欢迎回家！

   ）； }