react-thrux-router
v1.2.2
Published
Cross Browser router for React
Downloads
23
Readme
React Thrux Router
Cross Browser router for React using Thrux state manager.
TODO Docs, for now just an Example:
App.js
import React, {Component} from "react";
import Router from "thrux-router";
import Home from "./Home";
import First from "./First";
import Second from "./Second";
const routes = [
{path: '/', component: Home},
{path: '/first', component: First},
{path: '/second', component: Second}
];
class App extends Component {
render = () => (<Router routes={routes}/>)
}
Home.js
import React, {Component} from "react";
import {setTab, openModal, closeModal} from "thrux-router";
class Home extends Component {
render = () => (
<div>
<h1>Home</h1>
<a href="#/first?test=1&test2=2">First</a>
<a href="#/second">Second</a>
<button onClick={()=>openModal({component: Home})}>Set Modal</button>
<button onClick={()=>closeModal()}>UnSet Modal</button>
<button onClick={()=>setTab('sometab')}>Set Tab</button>
</div>
)
}
export default Home;
First.js
import React, {Component} from "react";
import {goRoute} from "thrux-router";
class First extends Component {
render = () => (
<div>
<h1>First</h1>
<button onClick={()=>goRoute('/second', {someProp: 1})}>Go Second</button>
</div>
)
}
export default First;
Second.js
import React, {Component} from "react";
import {goRoute} from "thrux-router";
class Second extends Component {
render = () => (
<div>
<h1>Second</h1>
<button onClick={()=>goRoute()}>Go Home</button>
</div>
)
}
export default Second;