@meniga/router

@meniga/router

Core is a library for handling routing and history

Exports

history, route

Customized versions of history from 'history' - This is not needed for react-router-6 and highly discouraged to use. This is only here temporarily while apps are being migrated to react-router v6.

Router

Customized versions of Router from 'react-router-dom' (v6) 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 (v6)

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 })

	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
}