@oerlikon/routing

@oerlikon/routing

Provides simple react components for menu frame -> main frame routing inside your oerlikon app.

Disclaimer: This module depends on react-router-dom. If you indent to use a different routing system in your app, this module is not for you.

explanation of terms

main frame: the main part of your app that is always visible to the user

menu frame: the sidebar menu that can be openend and cloapsed.

main frame usage

Ensure the <Router> is placed high in your main frame rendering tree.

import { Router } from '@oerlikon/routing';
import { render } from 'react-dom';

import App from './App';

render(
  <Router>
	  <App />
  </Router>,
	document.getElementById('root')
);

menu frame usage

There are two methods to use this module in your menu frame components:

1. Use the <Link> component inside your menu by providing to as prop and a label as children.

   import React from 'react';
   import { Link } from '@oerlikon/routing';
   
   export const MyMenu = () => {
     return (
       <>
         <h1>This is my menu</h1>
         <Link to="/overview">Go to overview inside the main frame!</link>
       </>
     );
   };
   

2. use the useRouting hook to programatically change the route.

   import React from 'react';
   import { useRouting } from '@oerlikon/routing';
   
   export const MyMenu = () => {
     const { pushPath } = useRouting();
     
     const handleButtonClick = () => {
       pushPath('/overview');
     };
     
     return (
       <>
         <h1>This is my menu</h1>
         <button type="button" onClick={handleButtonClick}>
           Go to overview inside the main frame!
         </button>
       </>
     );
   };