1.0.0-alpha.4 • Published 4 years ago
@oerlikon/routing v1.0.0-alpha.4
@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:
Use the
<Link>
component inside your menu by providingto
as prop and a label aschildren
.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> </> ); };
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> </> ); };