https://github.com/pknu-wap/wap-router
WAP 리액트 라우팅 라이브러리
https://github.com/pknu-wap/wap-router
pknu-wap react-routing-library router routing wap wap-router
Last synced: 16 days ago
JSON representation
WAP 리액트 라우팅 라이브러리
- Host: GitHub
- URL: https://github.com/pknu-wap/wap-router
- Owner: pknu-wap
- License: mit
- Created: 2023-05-27T03:34:02.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-01T14:50:45.000Z (almost 2 years ago)
- Last Synced: 2025-04-07T01:11:23.760Z (about 1 month ago)
- Topics: pknu-wap, react-routing-library, router, routing, wap, wap-router
- Language: TypeScript
- Homepage: https://wap-router.vercel.app/
- Size: 186 KB
- Stars: 5
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
WAP Router
wap-router은 react-router-dom의 영향을 받아 개발한 리액트 라우팅 라이브러리입니다.
## Feature
- **Declarative Routing**: 컴포넌트 기반으로 라우팅을 정의하고 표현할 수 있습니다.
- **Dynamic Routing**: 동적 라우팅을 지원합니다.
- **lightweight**: 불필요한 코드를 모두 제거하여 경량화된 라이브러리입니다.
- **Support Typescript**: 타입스크립트를 지원합니다.
## Installation
Install this library with the following command.
```sh
$ pnpm add wap-router
# or
$ yarn add wap-router
# or
$ npm intall wap-router
```
## Usage
우선 라우팅을 정의할 컴포넌트를 생성합니다.
동적 라우팅은 ":"를 사용하여 정의합니다. ex) "/main/product/:productId/user/:userId"
"\*"를 사용하여 와일드카드 라우팅을 정의할 수 있습니다. ex) "/main/product/\*"
주의할 점은 Route의 순서에 따라 라우팅이 결정되기 때문에 주의해야합니다.
ex) "/product/:productId", "/product/123" 순으로 정의하면 "/product/123"은 "/product/:productId"로 라우팅됩니다.
```tsx
import { Router, Routes, Route } from 'wap-router';
import AboutPage from './pages/AboutPage';
import HomePage from './pages/HomePage';
import ProductPage from './pages/ProductPage';
import ProductDetailPage from './pages/ProductDetailPage';
import NotFoundPage from './pages/NotFoundPage';
const App = () => {
return (
} />
} />
} />
}
/>
{/* "/*"은 모든 경로를 매칭시킨다. */}
} />
);
};
export default App;
```
Link 컴포넌트를 사용하여 라우팅을 변경할 수 있습니다.
```tsx
import { Link } from 'wap-router';
const HomePage = () => {
return (
Home Page
About
Product
);
};
```
useNavigate를 사용하여 라우팅을 변경할 수 있습니다.
```tsx
import { useNavigate } from 'wap-router';
const ProductPage = () => {
const navigate = useNavigate();
return (
Product Page
navigate('/main/product/123/user/456')}>
Product Detail
);
};
```
useParams를 사용하여 현재 경로의 동적 라우팅 정보를 알 수 있습니다.
```tsx
import { useParams } from 'wap-router';
// route => "/main/product/:productId/user/:userId"
// path => "/main/product/123/user/456"
// productId: 123, userId: 456
const ProductDetailPage = () => {
const { productId, userId } = useParams();
return (
Product Detail Page
productId: {productId}
userId: {userId}
);
};
```
usePath를 사용하여 현재 경로의 정보를 알 수 있습니다.
```tsx
import { usePath } from 'wap-router';
// route => "/main/product/:productId/user/:userId"
// path => "/main/product/123/user/456?name=abc#name"
// pathname: "/main/product/123/user/456"
// search: "?name=abc"
// hash: "#name"
const ProductDetailPage = () => {
const { pathname, hash, search } = usePath();
return (
Product Detail Page
pathname: {pathname}, search: {search}, hash: {hash}
);
};
```