Skip to content

Instantly share code, notes, and snippets.

@webmasterdevlin
Last active March 13, 2019 17:15
Show Gist options
  • Save webmasterdevlin/509268e47e86513ce9ae79a4bb66c835 to your computer and use it in GitHub Desktop.
Save webmasterdevlin/509268e47e86513ce9ae79a4bb66c835 to your computer and use it in GitHub Desktop.
React Router : src/router.tsx
import React from "react";
import { Redirect, Route, Switch } from "react-router";
import Heroes from "./pages/heroes/Heroes";
import EditHero from "./pages/heroes/EditHero";
import Villains from "./pages/villains/Villains";
import EditVillain from "./pages/villains/EditVillain";
import createBrowserHistory from "history/createBrowserHistory";
import { RouterStore, syncHistoryWithStore } from "mobx-react-router";
import { Provider } from "mobx-react";
import HeroStore from "./stores/HeroStore";
import VillainStore from "./stores/VillainStore";
const browserHistory = createBrowserHistory();
const routingStore = new RouterStore(); // Keep your MobX state in sync with react-router via a RouterStore.
// Merge all your stores here.
const stores = {
routing: routingStore,
HeroStore,
VillainStore
};
const history = syncHistoryWithStore(browserHistory, routingStore); // sync your browserHistory and routingStore
// spread your stores on the Provider which wraps the whole application
const Router = () => (
<Provider {...stores}>
<Switch>
<Route history={history} path="/heroes" component={Heroes} />
<Route history={history} path="/villains" component={Villains} />
<Route history={history} path="/edit-hero/:id" component={EditHero} />
<Route
history={history}
path="/edit-villain/:id"
component={EditVillain}
/>
<Redirect from="/" exact to="/heroes" />
</Switch>
</Provider>
);
export default Router;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment