@oerlikon/routing
Provides simple react components for menu frame -> main frame routing inside your oerlikon app.
Last updated 6 months ago by oerlikon-admin .
ISC · Original npm · Tarball · package.json
$ cnpm install @oerlikon/routing 
SYNC missed versions from official npm registry.

@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>
        </>
      );
    };
    

Current Tags

  • 1.0.0-alpha.4                                ...           latest (6 months ago)

4 Versions

  • 1.0.0-alpha.4                                ...           6 months ago
  • 1.0.0-alpha.3                                ...           6 months ago
  • 1.0.0-alpha.2                                ...           8 months ago
  • 1.0.0-alpha.1                                ...           8 months ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |