react-router-menu

React Router binding for Ant.Design's Menu.

Install

$ yarn add react-router-menu

Basic

import * as React from 'react'
import { render } from 'react-router'
import { createReactRouterMenu } from 'react-router-menu'
import { Router, hashHistory } from 'react-router'
 
// Declare the routes
const routes = {
  title: 'App',
  path: '/',
  component: App,
  childRoutes: [
    { title: 'Home', path: '/home', component: () => <div>Home</div> },
    { title: 'About', path: '/about', component: () => <div>About</div> },
    {
      title: 'Help', path: 'help', component: ({ children }) => <div>Help: {children}</div> ,childRoutes: [
        { title: 'FAQ', path: '/faq', component: () => <div>FAQ</div> },
        { title: 'Contact', path: '/contact', component: () => <div>Contact</div> }
      ]
    }
  ]
}
 
// Create a ReactRouterMenu
function App ({ children }) {
  const ReactRouterMenu = createReactRouterMenu(routes)
  return (
    <div>
      <ReactRouterMenu mode='horizontal' />
      <div>
        {children}
      </div>
    </div>
  )
}
 
// Render the router
render((
  <Router history={hashHistory} routes={routes}>
  </Router>
), mountNode)

<ReactRouterMenu />

This component is same as Ant Design's

routes

routes that pass to Router has the same property as PlainRoute, except these listed property:

• title: string Title for Menu Item

Limitation

• Asynchronous getComponent(s), getChildRoutes, getIndexRoute are not supported yet.

License

MIT License