0.0.1 • Published 1 year ago
react-filebased-router v0.0.1
react-filebased-router
Install
installing with npm :
npm i react-filebased-routerinstalling with yarn :
yarn add react-filebased-routerProperty Description Type Default
Property
| 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 |
Example
/* App.tsx */
import FileBasedRouter from 'react-filebased-router';
export const App = () => {
return <FileBasedRouter />;
};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.tsxThe 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 |