react-router-filebased

About React-Router-Filebased

React-Router-Filebased is a lightweight npm package designed to simplify your React application's routing process. This package is built on top of the popular React Router Dom v6 library and includes file-based routing with lazy loading capabilities, making it easier to manage your application's routes.

With React-Router-Filebased, you can create routes directly from your file structure. This means you can organize your components and routes in a logical way that makes sense for your application. In addition, the package supports lazy loading, so your components and routes will only be loaded when they are needed, reducing the initial load time of your application.

Install

``bash
cd project-name
npm i react-router-filebased react-router-dom
mkdir src/pages
`

Usage

`tsx
// src/App.tsx
import React from 'react'
import { FileBasedProvider } from 'react-router-filebased'

function App() {
return
}
export default App
`

`tsx
// src/pages/index.tsx
import React from 'react'

function Home() {
return

Home Page


}
export default Home
`

`tsx
// src/pages/[id].tsx
import React from 'react'
import { useParams } from 'react-router-dom'

function DynamicRoute() {
const { id } = useParams()
return

DynamicRoute with id : {id}


}
export default DynamicRoute
`

`tsx
// src/pages/layout.tsx
import React, { ReactNode } from 'react'

type Props = {
children: ReactNode
}
function RootLayout({ children }: Props) {
return


}
export default RootLayout
`

`tsx
// src/pages/loading.tsx
// lazy loading fallback
import React from 'react'

function Loading() {
return

Loading...


}
export default Loading
`

`tsx
// src/pages/500.tsx
import React from 'react'

function Error() {
return

Error Page


}
export default Error
`

`tsx
// src/pages/404.tsx
import React from 'react'

function NotFound() {
return

NotFound Page


}
export default NotFound
``

License

MIT © dev-mohamed-hussien