https://github.com/planxnx/react-router-management

inspired by vue-router
https://github.com/planxnx/react-router-management

react react-router react-router-dom react-router-management router vue-router

Last synced: about 2 months ago
JSON representation

inspired by vue-router

• Host: GitHub
• URL: https://github.com/planxnx/react-router-management
• Owner: Planxnx
• License: mit
• Created: 2021-05-07T15:58:45.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-08-07T03:45:28.000Z (over 3 years ago)
• Last Synced: 2024-11-16T01:37:40.240Z (2 months ago)
• Topics: react, react-router, react-router-dom, react-router-management, router, vue-router
• Language: TypeScript
• Homepage:
• Size: 348 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-router-management

> inspired by vue-router

[![NPM](https://img.shields.io/npm/v/react-router-management.svg)](https://www.npmjs.com/package/react-router-management) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save react-router-management

```

## Usage

### Basic

```tsx

// App.tsx

import React, { Component } from 'react'

import { BrowserRouter as Router } from 'react-router-dom'

import { RouterManagement } from 'react-router-management'

import HelloWorldPage from 'pages/HelloWorld'

const routes = [

  {

    exactly: false,

    path: '*',

    name: 'HelloWorld',

    component: HelloWorldPage

  }

]

export default () => {

  return (

    

      

    

  )

}

```

### With Router file

```tsx

// router/index.ts

import { RouterManagement } from 'react-router-management'

import HelloWorldPage from 'pages/HelloWorld'

const routes = [

  {

    exactly: false,

    path: '*',

    name: 'HelloWorld',

    component: HelloWorldPage

  }

]

export default () => {

  return RouterManagement({ routes })

}

// App.tsx

import React from 'react'

import { BrowserRouter as Router } from 'react-router-dom'

import { RouterManagementViews } from './router'

const App: React.FC = () => {

  return (

    

      

    

  )

}

export default App

```

### Grouping

```ts

// example for /user/hello

const routes = [

  {

    path: '/user',

    group: [

      {

        path: '/hello',

        name: 'HelloWorld',

        component: HelloWorldPage

      }

    ]

  },

  {

    path: '*',

    name: '404',

    component: 404Page

  }

]

```

## License

MIT © [Planxnx](https://github.com/Planxnx)