https://github.com/djyde/react-router-menu

Ant Design Menu React Router binding
https://github.com/djyde/react-router-menu

antd react-router

Last synced: 5 days ago
JSON representation

Ant Design Menu React Router binding

• Host: GitHub
• URL: https://github.com/djyde/react-router-menu
• Owner: djyde
• Created: 2017-07-30T07:26:13.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-07-30T09:24:30.000Z (over 7 years ago)
• Last Synced: 2024-04-29T11:05:07.711Z (7 months ago)
• Topics: antd, react-router
• Language: TypeScript
• Homepage: https://djyde.github.io/react-router-menu/
• Size: 1.52 MB
• Stars: 11
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-router-menu

React Router binding for Ant.Design's Menu.

[![npm](https://img.shields.io/npm/dm/react-router-menu.svg)](https://www.npmjs.com/package/react-router-menu)

[![npm](https://img.shields.io/npm/v/react-router-menu.svg)](https://www.npmjs.com/package/react-router-menu)

[![CircleCI](https://circleci.com/gh/djyde/react-router-menu.svg?style=svg)](https://circleci.com/gh/djyde/react-router-menu)

[![react-router](https://img.shields.io/badge/react--router-v3.x-green.svg)](https://github.com/ReactTraining/react-router/blob/v3/)

[![antd](https://img.shields.io/badge/antd-v2.x-yellowgreen.svg)](https://github.com/ant-design/ant-design)

## Install

```bash

$ yarn add react-router-menu

```

## Basic

Live demo: https://djyde.github.io/react-router-menu/

```tsx

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: () => 
Home
 },

    { title: 'About', path: '/about', component: () => 
About
 },

    {

      title: 'Help', path: 'help', component: ({ children }) => 
Help: {children}
 ,childRoutes: [

        { title: 'FAQ', path: '/faq', component: () => 
FAQ
 },

        { title: 'Contact', path: '/contact', component: () => 
Contact
 }

      ]

    }

  ]

}


// Create a ReactRouterMenu

function App ({ children }) {

  const ReactRouterMenu = createReactRouterMenu(routes)

  return (

    


      

      


        {children}

      

    

  )

}


// Render the router

render((

  

  

), mountNode)

```

![](https://ws1.sinaimg.cn/large/006tKfTcgy1fi1zpbetnaj30dk08gt8v.jpg)

### ``

This component is same as Ant Design's [](https://ant.design/components/menu)

### routes

`routes` that pass to `Router` has the same property as [`PlainRoute`](https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#plainroute), except these listed property:

- **title: string** Title for Menu Item

## Limitation

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

# License

MIT License