0.0.1 • Published 7 years ago
react-router-menu v0.0.1
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
0.0.1
7 years ago