Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zjuasmn/react-mobx-router

Declarative routing for React with Mobx Magic!
https://github.com/zjuasmn/react-mobx-router

mobx react react-router router

Last synced: 2 months ago
JSON representation

Declarative routing for React with Mobx Magic!

Host: GitHub
URL: https://github.com/zjuasmn/react-mobx-router
Owner: zjuasmn
License: mit
Created: 2017-02-10T12:45:12.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2019-01-25T01:09:26.000Z (almost 6 years ago)
Last Synced: 2024-09-29T00:21:24.549Z (3 months ago)
Topics: mobx, react, react-router, router
Language: JavaScript
Size: 271 KB
Stars: 10
Watchers: 2
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # react-mobx-router [![](https://img.shields.io/npm/v/react-mobx-router.svg?style=flat-square)](https://www.npmjs.org/package/react-mobx-router) [![GitHub issues](https://img.shields.io/github/issues/zjuasmn/react-mobx-router.svg)](https://github.com/zjuasmn/react-mobx-router/issues) [![Build Status](https://travis-ci.org/zjuasmn/react-mobx-router.svg?branch=master)](https://travis-ci.org/zjuasmn/react-mobx-router) [![Coverage Status](https://coveralls.io/repos/github/zjuasmn/react-mobx-router/badge.svg?branch=master)](https://coveralls.io/github/zjuasmn/react-mobx-router?branch=master)

Project still in progress...  

Declarative routing for `React` with `mobx` magic!

## You can read the whole document on  [**gitbooks**](https://zjuasmn.gitbooks.io/react-mobx-router/)

## Installation

Use [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/):

```

$ 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](https://unpkg.com/mobx/lib/mobx.umd.js)

* Import `react-mobx-router` [https://unpkg.com/react-mobx-router/umd/react-mobx-router.js](https://unpkg.com/react-mobx-router/umd/react-mobx-router.js)

Then get the `Router` `Route` `Link` component as below

```jsx

// using ES6 modules

import {BrowserRouter, Route, Link} from 'react-mobx-router'

// or if you concern about bundle size.

import BrowserRouter from 'react-mobx-router/BrowserRouter'

// using CommonJS modules

var Route = require('react-mobx-router').Router

// using CDN

var Link = ReactMobxRouter.Link

```

## Getting started

Below is a modified version of `BasicExample` in [`React Router(v4)`](https://reacttraining.com/react-router/examples/basic)

Live example is in [Codepen](http://codepen.io/zjuasmn/pen/KaJyYz?editor=0010)

### HTML

```html



```

### Javascript\(ES2015\)

```jsx

const {HashRouter as Router, Route, Link} = ReactMobxRouter;

// import {HashRouter as Router, Route, Link} from 'react-mobx-router'

const App = () => (  

    


      

        Home

        About

        Topics

      


      


      

        Home

      

      About}/>

      

        
Topics

        

          Rendering with React

          Components

          Link without `to`

        

        

          Please select a topic.

        

        

          

        

      

      

);

const Page = ({children, ...props}) => {children};

const Topic = ({topicId}) => (

  {topicId}

  Back to Topics

);

ReactDOM.render(,document.getElementById('root');

```