Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sina-byn/react-route-whiz

react routing simplified - a simple react routing library providing basic routing utilities
https://github.com/sina-byn/react-route-whiz

link react react-route-whiz react-router rollup route router routing typescript

Last synced: about 21 hours ago
JSON representation

react routing simplified - a simple react routing library providing basic routing utilities

Awesome Lists containing this project

README

        

# react-route-whiz [![NPM version](https://img.shields.io/npm/v/react-route-whiz.svg?style=flat)](https://www.npmjs.com/package/react-route-whiz) [![NPM monthly downloads](https://img.shields.io/npm/dm/react-route-whiz.svg?style=flat)](https://npmjs.org/package/react-route-whiz) [![NPM total downloads](https://img.shields.io/npm/dt/react-route-whiz.svg?style=flat)](https://npmjs.org/package/react-route-whiz)

> react routing simplified - a simple react routing library providing basic routing utilities

Please consider following this project's author, [Sina Bayandorian](https://github.com/sina-byn), and consider starring the project to show your :heart: and support.

## Install
```sh
$ npm i --save react-route-whiz
```

## Usage
```js
import { Link, Route, Router } from 'react-route-whiz';

const App = () => {
return (



{/* Links */}
Home
Blog

{/* Routes */}

Home Page


Blog Page



);
};

export default App;
```

## Components

* `Router`: provides the context required for routing

* `Route`: specifies a single route **-** props:
* `path`: **String -** required
* `children`: **React.ReactNode -** content of the route
* `Link`: link component to navigated between the specified routes **-** props:
* `to`: **String -** required
* `children`: **React.ReactNode -** content of the link
* note that this component is used for navigating between the specified routes **-** in order to naviagte to a different domain use the `` element

## hooks
* `useNavigation`: gives you access to the `navigationContext` including:
* `currentPath`: **String**
* `navigate`: **(to: String) => Void -** a function used to navigate to different routes without triggering page refreshes