How to use mobx-router - 10 common examples

// views
// import Redirect from "./../Redirect/Redirect";
import DomainViewer from "./DomainViewer";
import NewPost from "./NewPost";
import ArticleView from "./ArticleView";

const views = {
  home: new Route({
    path: "/",
    component: ,
    beforeEnter: () => {
      store.app.states.fetchingArticles = true;
    }
  }),
  newPost: new Route({
    path: "/newPost",
    component: ,
    beforeEnter: (route, params, propStore) =>
      propStore.app.states.menuStates.signedIn
  }),
  articleView: new Route({
    path: "/article/:fileHash",
    component: ,
    beforeEnter: () => {
      store.app.currentArticle = undefined;
    }
  }),
  postPage: new Route({
    path: "/posts/page/:page",
    component: ,
    beforeEnter: () => {

import React from "react";

// models
import { Route } from "mobx-router";

import store from "./../../lib/store";

// views
// import Redirect from "./../Redirect/Redirect";
import DomainViewer from "./DomainViewer";
import NewPost from "./NewPost";
import ArticleView from "./ArticleView";
import SignInView from "./SigninView";

const views = {
  home: new Route({
    path: "/",
    component: ,
    beforeEnter: () => {
      store.app.states.fetchingArticles = true;
    }
  }),
  newPost: new Route({
    path: "/newPost",
    component: 
  }),
  articleView: new Route({
    path: "/article/:fileHash",
    component: ,
    beforeEnter: () => {
      store.app.currentArticle = undefined;
    }

import React from "react";

// models
import { Route } from "mobx-router";

import store from "./../../lib/store";

// views
// import Redirect from "./../Redirect/Redirect";
import DomainViewer from "./DomainViewer";
import NewPost from "./NewPost";
import ArticleView from "./ArticleView";

const views = {
  home: new Route({
    path: "/",
    component: ,
    beforeEnter: () => {
      store.app.states.fetchingArticles = true;
    }
  }),
  newPost: new Route({
    path: "/newPost",
    component: ,
    beforeEnter: (route, params, propStore) =>
      propStore.app.states.menuStates.signedIn
  }),
  articleView: new Route({
    path: "/article/:fileHash",
    component: ,
    beforeEnter: () => {

// @flow
import AppStore from 'stores/app-store';
import {RouterStore} from 'mobx-router';

const store = {
  app: new AppStore(),
  router: new RouterStore()
};

export default store;

// @flow
import AppStore from 'stores/app-store';
import {RouterStore} from 'mobx-router';

const store = {
  app: new AppStore(),
  router: new RouterStore()
};

export default store;

import React from 'react'
import { render } from 'react-dom'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import DevTools from 'mobx-react-devtools'
import { startRouter } from 'mobx-router'
import views from './routeconfig'

// use it to create the app state
import StateStore from './state'
const store = new StateStore(views)
startRouter(views, store)

// init react components part using the only prop: the store
import { App } from './components/app'
const mount = document.getElementById("app")  // mountpoint
render((
  <div>
    
      
    
    {Conf.debug ? () : null}
  </div>
), mount)  // and final render

// Imports
import React from "react";
import { Layout } from "antd";
import { MobxRouter, startRouter, Link } from "mobx-router";

import store from "./lib/store";
import views from "./components/views/views";

// Components
import NeoLogo from "./components/icons/NeoLogo";

const { Content, Header } = Layout;

startRouter(views, store);

const App = () => (
  
    <header style="{{">
      
        Neo<span>blog</span>
      
      <span>
        
      </span>
    </header>
    
      <content>
        
      </content>

path: '/entity/:entityname',
    component: ,
    beforeExit: (route, params, store, queryParams) => {
      store.beforeListViewExit(route, params, store, queryParams)
    },
    beforeEnter: (route, params, store, queryParams) => {
      store.beforeListViewEnter(route, params, store, queryParams)
    },
    onEnter: (route, params, store) => {
      store.showEntityListView(params.entityname)
    },
    onParamsChange: (route, nextParams, store, nextQueryParams) => {
      store.onListParamsChange(nextParams, nextQueryParams)
    }
  }),
  entity_detail: new Route({
    path: '/entity/:entityname/:id',
    component: ,
    onEnter: (route, params, store) => {
      store.showEntityUpdateView(params.entityname, params.id)
    },
    onParamsChange: (route, nextParams, store) => {
      store.showEntityUpdateView(nextParams.entityname, nextParams.id)
    }
  })
}

export default views

import React from 'react'
import { Route } from 'mobx-router'

//components
import EntityList from './components/entity_list'
import EntityEdit from './components/entity_edit'
import LoginPage from './components/login'

const qparsRegex = /\/posts\?(page=(\d)+)?(&sortField=(\w)+)?(&sortDir=ASC|DESC)?(&filters=(.*))?/

const views = {
  login: new Route({
    path: '/',
    component: ,
    beforeEnter: (route, params, store) => {
      store.showLogin()
    }
  }),
  entity_list: new Route({
    path: '/entity/:entityname',
    component: ,
    beforeExit: (route, params, store, queryParams) => {
      store.beforeListViewExit(route, params, store, queryParams)
    },
    beforeEnter: (route, params, store, queryParams) => {
      store.beforeListViewEnter(route, params, store, queryParams)
    },
    onEnter: (route, params, store) => {

constructor(views) {
    super()
    this.router = new RouterStore()
    this.views = views
    this.router.cv = {}
    this.listconfs = {}
    this.editconfs = {}
    PostsInfoInit(this, this.editconfs, this.listconfs)
    TagsInfoInit(this, this.editconfs, this.listconfs)
  }