basic-navigation 은 모바일 웹을 위한 기초적인 라우팅 및 탐색을 제공하는 React 전용 라이브러리예요. 고급 기능이나 성능이 중요하지 않은 간단한 프로젝트라면 한 번 사용해 보세요!

🚀 특징

• 간단한 사용
• 화면 전환 효과 지원
• Server-Side Rendering 지원

설치 및 시작

pnpm add basic-navigation

import { Navigator, Navigate } from 'basic-naivgation';
import HomeActivity from '@activites/HomeActivity';
import ProductActivity from '@activites/ProductActivity'

function App() {
  return (
    <Navigator>
      <Navigate name={'HomeActivity'} path={'/'}>
        <HomeActivity />
      </Navigate>
      <Navigate name={'ProductActivity'} path={'/product/:id'}>
        <ProductActivity />
      </Navigate>
    </Navigator>
  );
}

export default App;

import { SlideScreen } from 'basic-naivgation';

function HomeActivity() {
  return (
    <SlideScreen>
      Welcome HomeActivity
    </SlideScreen>
  );
}

export default HomeActivity;

예시

탐색

import { SlideScreen, useNavigation } from 'basic-naivgation';

function HomeActivity() {
  const navigation = useNavigation();

  const handleClick = () => navigation.push('ProductActivity', { id: '1' });

  return (
    <SlideScreen>
      Welcome HomeActivity
      <button onClick={handleClick}>go to ProductActivity</button>
    </SlideScreen>
  );
}

export default HomeActivity;

// with TypeScript

import 'basic-navigation';

declare module "basic-navigation" {
    export interface BaseActivity {
        name: 'HomeActivity' | 'ProductActivity';
    }
    export interface BaseActivityPath {
        HomeActivity: '/';
        ProductActivity: '/product/:id'
    }
    export interface BaseActivityParams {
        ProductActivity: {
            id: string;
        }
    }
}