MiniApp JS SDK

SDK giúp Mini App giao tiếp với Super App host thông qua JS Bridge.

Cài đặt

npm install @vetc-miniapp/ui-react

Sử dụng

useNavigate – Điều hướng Mini App qua Native (Flutter)

useNavigate là hook dùng trong mini app React để điều hướng thông qua host app (Flutter), thay vì tự điều hướng nội bộ bằng react-router-dom.

Hook này giúp:

• Mini app không phụ thuộc URL thực
• Toàn bộ navigation được native kiểm soát
• Đồng bộ header, back stack, animation giữa mini app & app chính

📦 Import

import { useNavigate } from '@vetc-miniapp/ui-react';

const navigate = useNavigate();

navigate(
  path: string,
  title: string,
  params?: Record<string, any>,
  options?: {
    replace?: boolean;
    popTo?: string;
  }
): void

🚀 Cách sử dụng cơ bản

Điều hướng sang page khác

const navigate = useNavigate();

<button onClick={() => navigate('/about', { title: "About", params: {}})}>
  Go to About
</button>

Truyền params
navigate('/vehicle-detail', {
  title: "About",
  params: {
    id: 'abc123',
    source: 'homepage',
  }
});

➡ Flutter sẽ nhận được URL dạng:

/miniapp/vehicle-detail?id=abc123&source=homepage

🔁 Replace route (không giữ back stack)

navigate('/login', { mode: 'replace' });


navigate('/home', { popTo: '/home' });

🧩 Ví dụ đầy đủ trong Component

import { useNavigate } from '@vetc-miniapp/ui-react';

function VehicleItem({ vehicle }) {
  const navigate = useNavigate();

  return (
    <div onClick={() => navigate('/vehicle-detail', { title: "Chi tiết xe"}, { mode: "replace" })}>
      {vehicle.name}
    </div>
  );
}

⚠️ Lưu ý quan trọng

❌ Không dùng react-router-dom

// KHÔNG dùng
import { useNavigate } from 'react-router-dom';


Mini app không quản lý history nội bộ.

❌ Không dùng window.location

window.location.href = '/about'; // ❌