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: 1 day ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/sina-byn/react-route-whiz
• Owner: sina-byn
• License: mit
• Created: 2023-07-23T16:25:15.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-29T14:30:21.000Z (over 1 year ago)
• Last Synced: 2024-01-26T08:01:41.604Z (10 months ago)
• Topics: link, react, react-route-whiz, react-router, rollup, route, router, routing, typescript
• Language: TypeScript
• Homepage:
• Size: 11.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

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