@meniga/router

Core is a library for handling routing and history

Exports

history, route

Customized versions of history from 'history'

Router

Customized versions of Router from 'react-router-dom' which includes a ScrollManager

BrowserRouter, MemoryRouter, HashRouter, RouterProvider, createBrowserRouter, createHashRouter, createMemoryRouter, createRoutesFromElements, Routes, Route, Link, Navigate, useLocation, useNavigate, useMatches, useMatch, useNavigation, useHref, useParams, useRoutes, useSearchParams, useRouteError,

Direct exports from react-router-dom

Getting started

This example shows you how to use the RouterProvider with routes as an array, but you can also use e.g. BrowserRouter directly and specify your routes as elements.

import React, { Fragment } from 'react'
import { createBrowserRouter, RouterProvider } from '@meniga/router'
import { routeConfig } from './routeConfig'
import { globalConfig } from '@meniga/config'

const _configBasename = globalConfig('routing.prefix', '')

const App = () => {
	const browserRouter = createBrowserRouter(routeConfig(), { basename: _configBasename })

	//Expose router as a window object in order to use it in 'history' from @meniga/core
	window._router = browserRouter 

	return <RouterProvider router={ browserRouter } />
}

export default App

Example routeConfig.js:

import React from 'react'

import { default as LayoutRoot } from './layouts/LayoutRoot'
import { default as LayoutError } from './layouts/LayoutError'
import { default as LayoutSimple } from './layouts/LayoutSimple'
import { default as LayoutDefault } from './layouts/LayoutDefault'

import Logout from './Logout'
import Login from './open/Login'
import Error503 from './Error503'
import Error404 from './Error404'
import NetworkError from './NetworkError'
import Protected from './protected/Protected'

export const routeConfig = () => {

	const errorRoutes = [
		{
			key: 'error503Route',
			element: <Error503 />,
			path: '/503'
		},
		{
			key: 'error404Route',
			element: <Error404 />,
			path: '/404'
		},
		{
			key: 'errorNetworkRoute',
			element: <NetworkError />,
			path: '/error'
		}
	]

	const simpleRoutes = [
		{
			key: 'logoutRoute',
			element: <Logout />,
			path: '/logout'
		},
		{
			key: 'loginRoute',
			path: '/login/:path?',
			element: <Login />
		}
	]

	const defaultRoutes = [
		{
			key: 'protectedRoutes',
			path: '/:page?/*?',
			element: <Protected />
		}
	]

	const routes = [
		{
			element: <LayoutRoot />,
			children: [
				{
					element: <LayoutError />,
					children: errorRoutes
				},
				{
					element: <LayoutSimple />,
					children: simpleRoutes
				},
				{
					element: <LayoutDefault />,
					children: defaultRoutes
				},
			]
		}		
	]

	return routes
}