react-filebased-router

$3

installing with npm :
``
npm i react-filebased-router
`

installing with yarn :
`
yarn add react-filebased-router
`

Property Description Type Default

$3

| Property | Description | Type | Default |
| :---------: | :-------- | :-------- | :-------- |
| basename | Sets the base path for the router. This value is added to all routes. | string | '/' |
| custom404 | Allows you to set a custom 404 page component. This component will be used when a 404 page is needed. | React.ComponentType or React.ReactElement |

Not Found

|

$3

`tsx
/ App.tsx /
import FileBasedRouter from 'react-filebased-router';

export const App = () => {
return ;
};
`
After configuring App.tsx as above, you should have the following file structure.
`
src
│
├── App.tsx
├── FileBasedRouter.tsx
├── index.tsx
│
└── pages
├── index.tsx
├── login.tsx
│
├── community
│ ├── index.tsx
│ └── [id].tsx
│
└── [username]
├── index.tsx
└── profile.tsx
`
The file structure like the one above will be matched as follows.
| URL Path | File Path |
|------------------------------|----------------------------------|
| {baseurl} | pages/index.tsx |
| {baseurl}/login | pages/login.tsx |
| {baseurl}/community | pages/community/[id].tsx |
| {baseurl}/community/{id} | pages/community/index.tsx |
| {baseurl}/{username} | pages/[username]/index.tsx |
| {baseurl}/{username}/profile | pages/[username]/profile.tsx` |