https://github.com/razorrsd/md-react-router

A Simple react router light weight and easy to use
https://github.com/razorrsd/md-react-router

react react-router reactjs reactjs-components router simple typescript

Last synced: 13 days ago
JSON representation

A Simple react router light weight and easy to use

• Host: GitHub
• URL: https://github.com/razorrsd/md-react-router
• Owner: RazorRSD
• License: mit
• Created: 2022-10-24T15:01:12.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2022-10-31T08:53:30.000Z (about 2 years ago)
• Last Synced: 2024-12-14T18:48:47.483Z (14 days ago)
• Topics: react, react-router, reactjs, reactjs-components, router, simple, typescript
• Language: TypeScript
• Homepage:
• Size: 439 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# md-react-router

A simple, lightweight, and easy-to-use react-router. Just add your routes list you are good to go.

## Install

```bash

npm install --save md-react-router

```

## Usage

_Add your routes list in `routes.js` file_

```ts

import { Home, About, TestHash, ItemCategories, Item } from './pages'

export const routes = [

  {

    path: '/',

    children: 

  },

  {

    path: '/about',

    children: 

  },

  //Use Hash to redirect: page will be desided on letters and you can pass a id using numbers after letters

  {

    hash: 'ct',

    children: 

  },

  //You can add Dynamic Routing with ":" name

  {

    path: '/testDyn/:catid',

    children: 

  },

  {

    path: '/testDyn/:id/details',

    children: 

  }

]

```

_Add `Router` component in your `App.js` file_

```tsx

import React from 'react'

import { Router } from 'md-react-router'

import Header from './components/header'

import NotFound from './componets/NotFoundComp'

import Routes from './Routes'

const App = () => {

  return (

    


      

      
{getRoutes(Routes, NotFound)}

    

  )

}


export default App

```

_Use "Link" instead of "A" when you want to navigate to another page_

```tsx

import React from 'react'

import { Link } from 'md-react-router'

const Header = () => {

  return (

    


      Home

      About

      Contact

      Test Hash

      Category 01

      Item X

    

  )

}


export default Header

```

_You can ust ctx to get query values from router_

```tsx

import React from 'react'

import { ctx } from 'md-react-router'

const Item = () => {

  return 
testDyn {ctx.query.id}

}


export default Item

```

## License

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