Router for ReactJS
Via npm
npm install reactjs-router
Via yarn
yarn add reactjs-router
I recommend using webpack for your project. I have tested this module with webpack.
I have not tested it with browserify or plain browser <script></script>
tags. If you are successfully use it with either, please let me know so I can update this page.
Import in ES6
import {RouterRoute} from 'reactjs-router';
In your react app, each page should be encompassed by the RouterRoute
component. The properties accepted by the component are:
url
- The relative URL for the pagetitle
- The title of the page
Here is an example defining two pages with their respective titles and URLs:
<RouterRoute url="/" title="Viraj Chitnis">
<HomePage />
</RouterRoute>
<RouterRoute url="/resume" title="Resumé - Viraj Chitnis">
<ResumePage />
</RouterRoute>
Import in ES6
import {RouterLink} from 'reactjs-router';
Replace your links with a RouterLink
component. The properties supported by it are:
className
- CSS class nametitle
- Title of the destinationhref
- Relative URL of the destinationresetScrollPos
- Whether or not you would like the scroll position to be reset.
Here is an example where the destination page requires its scroll position to be reset:
<RouterLink className="nav-standard" title="Resumé - Viraj Chitnis" href="/resume" resetScrollPos>resumé</RouterLink>
Here is an example where the destination page does not require its scroll position to be reset:
<RouterLink className="nav-home" title="Viraj Chitnis" href="/">VC</RouterLink>
Below is the standard HTML ouput of the above component to give you an idea on how the above code is to be used:
<a href="/" class="nav-home">VC</a>
My website virajchitnis.com uses this module. The complete code for my website is available here. The example code above is from my website.
Fork this repo and send me a pull request.
Please create an issue in the issues section of this repository.