react-mobx-router
Project still in progress...
Declarative routing for React
with mobx
magic!
gitbooks
You can read the whole document onInstallation
$ npm install --save react-mobx-router
or
$ yarn add react-mobx-router
Use CDN
- Assuming
react
is imported since you are development a react project. - Import
mobx
https://unpkg.com/mobx/lib/mobx.umd.js - Import
react-mobx-router
https://unpkg.com/react-mobx-router/umd/react-mobx-router.js
Then get the Router
Route
Link
component as below
// using ES6 modulesimport BrowserRouter Route Link from 'react-mobx-router'// or if you concern about bundle size.import BrowserRouter from 'react-mobx-router/BrowserRouter' // using CommonJS modulesvar Route = Router // using CDNvar Link = ReactMobxRouterLink
Getting started
Below is a modified version of BasicExample
in React Router(v4)
Live example is in Codepen
HTML
Javascript(ES2015)
const HashRouter as Router Route Link = ReactMobxRouter;// import {HashRouter as Router, Route, Link} from 'react-mobx-router' const App = <div> <ul> <li><Link ="/">Home</Link></li> <li><Link ="/about">About</Link></li> <li><Link ="/topics">Topics</Link></li> </ul> <hr/> <Route => Home </Route> <Route ="about" =/> <Route ="topics" ="div"> <h2>Topics</h2> <ul> <li><Link ='rendering'>Rendering with React</Link></li> <li><Link ='components'>Components</Link></li> <li><Link >Link without `to`</Link></li> </ul> <Route > <h3>Please select a topic</h3> </Route> <Route =':topicId'> <Topic /> </Route> </Route> </div> ;const Page = children ...props <div><h2>children</h2></div>;const Topic = topicId <div> <h3>topicId</h3> <Link ="..">Back to Topics</Link></div>; ReactDOM