https://github.com/gregnb/simple-react-router
This is a simple client side ONLY React Router
https://github.com/gregnb/simple-react-router
javascript react
Last synced: 3 months ago
JSON representation
This is a simple client side ONLY React Router
- Host: GitHub
- URL: https://github.com/gregnb/simple-react-router
- Owner: gregnb
- Created: 2016-12-07T14:11:24.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-08T16:07:55.000Z (over 9 years ago)
- Last Synced: 2025-07-05T16:41:43.706Z (12 months ago)
- Topics: javascript, react
- Language: JavaScript
- Homepage:
- Size: 33.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# simple-react-router
This is a simple client side ONLY React Router
Installation
------------
Just download SimpleRouter.min.js (3KB minified) and include it with a script tag like this:
```html
```
Router Configuration
--------------------
The routing configuration is very straight forward. You simply define the paths and tie components to them! Path value of * is used for Index.
Here is the example config that's found in the sample code inside of example/
```html
/* Tie path to Components */
var routing = (
} />
} />
} />
} />
} />
);
/* Structure main app */
var App = (
{routing}
);
/* Render to DOM */
ReactDOM.render(App, document.getElementById('app-root'));
```
The Routing configuration above will render the following:
URL | Component
------------------------|-----------
*/* | **Index**
*/category* | **Category**
*/product* | **Product**
*/support/faqs* | **Support -> FAQs**
*/support/contact* | **Support -> Contact**
How to change Routes
--------------------
To change routing from any place within your app simply call window.router.changeRoute(path). Example usage:
```html
handleClick: function(route, event) {
event.preventDefault();
event.stopPropagation();
window.router.changeRoute('/product');
}
```