Navigation

Simple module which allows to monitor navigation events

Caution

using createBrowserRouter from React Router will cause unpredictable links and history behavior,
since it will create its own wrapper on browser history which is NOT connected to the framework

Configuration

Options

basename

The module needs to now the base path for routing and creating links.

basename is optional but should ONLY skipped if used as stand alone application or portal

historyType

• browser - uses relative paths
• hash - use url hash
• memory - use memory routing (ex. react-native)

by default this is set to browser

createHistory

callback function for creating history based on selected historyType

Example

cookbook -see example

config.ts

import type { AppModuleInitiator } from '@equinor/fusion-framework-app';
import { enableNavigation } from '@equinor/fusion-framework-module-navigation';

export const configure: AppModuleInitiator = (configurator, args) => {
    const { basename } = args.env;
    enableNavigation(configurator, basename);
};

export default configure;

Router.tsx

import { RouterProvider } from 'react-router-dom';
import { useRouter } from '@equinor/fusion-framework-react-app/navigation';

import routes from './routes';

export default function () {
    const router = useRouter(routes);
    return <RouterProvider router={router} fallbackElement={<p>:(</p>} />;
}

Router.tsx

import { Link, Outlet, RouteObject } from 'react-router-dom';

import { useLocation } from 'react-router-dom';

const Root = () => {
    const currentLocation = useLocation();
    return (
        <div>
            <section style={{ display: 'inline-flex', gap: 10 }}>
                <Link to={''}>Home</Link>
                <Link to={'page1'}>Page 1</Link>
                <Link to={'page2'}>Page 2</Link>
            </section>
            <pre>{JSON.stringify(currentLocation, null, 4)}</pre>
            <Outlet></Outlet>
        </div>
    );
};

export const routes: RouteObject[] = [
    {
        path: '/',
        element: <Root />,
        children: [
            {
                index: true,
                element: <p>home</p>,
            },
            {
                path: 'page1/*',
                element: <p>page1</p>,
            },
            {
                path: 'page2/*',
                element: <p>page2</p>,
            },
        ],
    },
];

export default routes;