Create URI schema and serialize type safe (support subpath, relative path)
npm install uri-managerURI serialize and match data, use safety type!
Successfully integration to react-router-v6!
``ts
import { URISchema } from 'uri-manager';
const product = new URISchema('/product');
const productList = product.createSubPath<{ search?: string; }>('/list');
const productDetail = product.createSubPath('/:productId');
// serialize
productList.serialize(); // "/product"
productList.serialize({ search: 'keyword' }); // "/product?search=keyword"
productDetail.serailize({ productId: '10' }); // "product/10"
// match
productDetail.match('/foo/bar'); // null
productDetail.match('/product/15'); // { productId: 15 }
// deep sub path serialize
const media = new URISchema('/media');
const mediaDetail = media.createSubPath('/:mediaId');
const mediaDetailComments = mediaDetail.createSubPath('/comments');
const mediaDetailCommentDetail = mediaDetailComments.createSubPath('/:commentId');
media.serialize(); // "/media"
mediaDetail.serialize({ mediaId: '10' }); // "/media/10"
mediaDetailComments.serialize({ mediaId: '15' }); // "/media/15/comments"
mediaDetailCommentDetail.serialize({ mediaId: '20', commentId: '25' }); // "/media/20/comments/25"
`
`ts
import { URISchema, ParamsFromPath } from 'uri-manager';
const productList = new URISchema<{ search?: string; }>('/product');
productList.serialize(); // ✅ "/product"
productList.serialize({ search: 'foo' }); // ✅ "/product?search=foo"
const productDetail = new URISchema
productDetail.serialize({ productId: 10, tag: 'bar' }); // ✅ "/product/10?tag=bar"
`
`ts
import { URISchema } from 'uri-manager';
const filter = new URISchema({
template: '/filter/:category?',
defaultParams: {
category: 'ALL'
}
});
filter.serialize(); // ✅ "/filter/ALL"
filter.serialize({ category: 'FEATURES' }); // ✅ "/filter/FEATURES"
`
`ts
import { URISchema } from 'uri-manager';
const viewSchema = new URISchema<{ view: string }>({ baseSchema: 'weverseshop://weverseshop.benx.co' });
viewSchema.serialize({ view: 'noticeDetail' }); // ✅ "weverseshop://weverseshop.benx.co/?view=noticeDetail"
`
This version(v1.0.0) is integration to react-router-v6
`tsx
import React from 'react';
import { Route, Routes, useParams, Outlet } from 'react-router';
import { URISchema, GetURISchemaParamKeys } from 'uri-manager';
const product = new URISchema('/product');
const productDetailRoute = product.createSubPath('/product/:productId');
const ProductDetail = () => {
const { productId } = useParams
return (
Product detail id : {productId}
);
};
declare function ProductLayout(): React.FC;
declare function ProductList(): React.FC;
const App = () => {
return (
}>
)
};
``