Provider

Docs

Provider

Main component that provides all router functionality

Props

Prop	Type	Description	Default Value
`routes`	`RouteWithComponent[]`	Array of route objects from config	`[]`

Example

You can directly pass provider to app.tsx

/src/app.tsx

import { AnotherReactRouterProvider } from "another-react-router"
import { routes } from "another-react-router.config.ts"
 
export function App() {
	return <AnotherReactRouterProvider routes={routes} />
}

Or create a separate component and use it as shown above

/src/components/router.tsx

import { AnotherReactRouterProvider } from "another-react-router"
import { routes } from "another-react-router.config.ts"
 
export function RouterProvider() {
	return <AnotherReactRouterProvider routes={routes} />
}

Even tho we recommend using file based routing with CLI you can do something like following

/src/components/router.tsx

import {
	AnotherReactRouterProvider,
	type RouteWithComponent
} from "another-react-router"
import { HomeLayout, HomePage } from "@/routes/home-page"
import { VideoPage } from "@/routes/video-page"
 
export function RouterProvider() {
	const routes: RouteWithComponent[] = [
		{
			path: "/",
			page: HomePage,
			layout: HomeLayout,
			routes: [
				{
					path: "/video/",
					page: VideoPage,
					routes: [
						{
							path: "/video/[id]/",
							page: VideoPage,
							routes: []
						}
					]
				}
			]
		}
	]
	return <AnotherReactRouterProvider routes={routes} />
}

Dynamic Routes Link