https://github.com/ldd/react-simplest-router

simplest router for React
https://github.com/ldd/react-simplest-router

Last synced: 8 days ago
JSON representation

simplest router for React

• Host: GitHub
• URL: https://github.com/ldd/react-simplest-router
• Owner: ldd
• License: mit
• Created: 2020-04-07T03:52:38.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-04-07T04:14:19.000Z (over 4 years ago)
• Last Synced: 2024-04-29T07:03:02.770Z (8 months ago)
• Language: JavaScript
• Size: 380 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# react-simplest-router

> Simplest React router using hooks

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

[![Build Status](https://travis-ci.com/ldd/react-simplest-router.png?branch=master)](https://travis-ci.com/ldd/react-simplest-router)

[![Coverage Status](https://coveralls.io/repos/github/ldd/react-simplest-router/badge.svg?branch=master)](https://coveralls.io/github/ldd/react-simplest-router?branch=add-tests)

[![Dependencies](https://david-dm.org/ldd/react-simplest-router.svg)](https://david-dm.org/ldd/react-simplest-router)

[![Size](https://badgen.net/bundlephobia/minzip/react-simplest-router)](https://bundlephobia.com/[email protected])

_Tired of very big routers with a lot of options and documentation?_

_Need the absolutely simplest router?_

_URL Hash routers are ok with you?_

Use this package

## Install

```bash

npm install --save react-simplest-router

```

or

```bash

yarn add react-simplest-router

```

## Usage

`react-simplest-router` exports by default a hook that you can use to handle routing.

In the spirit of show-dont-tell, here's an example:

```jsx

import React from "react";

import useRouter from "react-simplest-router";

import "./App.css";

const A = () => A;

const B = () => B;

const initialRoutes = [

  { location: "#A", component: A },

  { location: "#B", component: B }

];

const Picker = ({ routes, changeRoute }) => (

  


    {routes.map(({ location, isActive }) => (

       changeRoute(location)}

        className={isActive ? "active" : "inactive"}

      >

        {location}

      

    ))}

  

);


const App = () => {

  const { setRoute, routes, ActiveComponent } = useRouter(initialRoutes);

  const changeRoute = newRoute => {

    setRoute(newRoute);

    document.location.hash = newRoute;

  };

  return (

    


      

      

    

  );

};


export default App;

```

As you can see, `useRouter` only takes in a routes array. Each route should have two properties:

- `location` to know where to go

- `component` to know what to render

> `react-simplest-router` doesn't have ANY other functionality or API to learn. It is truly the simplest router

## License

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