Laravel Inertia中如何在JSX文件内检查当前路由并模拟Route::is()

方法一：基于路由名称的匹配（推荐） #

Laravel的Route::is()本质是匹配路由名称的通配符，结合Inertia可以直接从后端共享路由信息到前端，实现更可靠的匹配：

1. 后端共享路由信息
   在app/Http/Middleware/HandleInertiaRequests.php的share方法中添加路由名称和参数：

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'route' => [
            'name' => $request->route()?->getName(),
            'parameters' => $request->route()?->parameters(),
        ],
    ]);
}

2. 前端实现isRoute工具函数
   在helpers.js中编写支持通配符匹配的函数：

import { usePage } from '@inertiajs/react';

export function isRoute(patterns) {
    const currentRouteName = usePage().props.route.name;
    if (!currentRouteName) return false;

    // 支持传入单个字符串或字符串数组
    const patternList = Array.isArray(patterns) ? patterns : [patterns];

    return patternList.some(pattern => {
        // 处理通配符，比如 'admin.*' 转成正则
        const regexPattern = pattern.replace(/\./g, '\\.').replace(/\*/g, '.*');
        return new RegExp(`^${regexPattern}$`).test(currentRouteName);
    });
}

3. 组件中使用

import { isRoute } from './helpers';

function Layout() {
    return (
        <div>
            {isRoute('dashboard.*') && <DashboardSidebar />}
            {isRoute(['admin.users', 'admin.roles']) && <AdminNavbar />}
        </div>
    );
}

方法二：基于URL路径的通配符匹配 #

如果不想依赖路由名称，也可以增强你原有的实现，支持路径通配符：

export function isRoute(patterns) {
    const currentPath = window.location.pathname;
    const patternList = Array.isArray(patterns) ? patterns : [patterns];

    return patternList.some(pattern => {
        // 处理路径通配符，比如 '/admin/*'
        const regexPattern = pattern.replace(/\*/g, '.*');
        return new RegExp(`^${regexPattern}$`).test(currentPath);
    });
}

使用示例：

{isRoute('/dashboard/*') && <DashboardComponent />}
{isRoute(['/users', '/users/*']) && <UserRelatedComponent />}

优势说明 #

• 支持Laravel风格的通配符（*）匹配
• 支持单个规则或多个规则数组
• 基于路由名称的方式更健壮，不受URL路径变更影响

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