it is react filebased router (with vite)
npm install react-filebased-router
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` |