How to use the boring-router.Router function in boring-router
To help you get started, we’ve selected a few boring-router examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
makeflow / boring-router / packages / boring-router-react / examples / multi-route-match / main.tsx View on Github 
import {Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';
import {
BrowserHistory,
Link,
Route,
RouteComponentProps,
} from '../../bld/library';
const history = new BrowserHistory();
const router = new Router(history);
const route = router.$route({
default: {
$match: '',
},
account: {
$children: {
signUp: true,
resetPassword: true,
settings: true,
},
},
});
export type RouteType = typeof route;import {RouteMatch, Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';
import {BrowserHistory, Link, Route} from '../../bld/library';
const history = new BrowserHistory();
const router = new Router(history);
const route = router.$route({
default: {
$match: '',
},
account: {
$exact: true,
$children: {
id: {
$match: RouteMatch.segment,
},
},
},
});
@observerimport {Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';
import {BrowserHistory, Link, Route} from '../../bld/library';
const history = new BrowserHistory();
const router = new Router(history);
const primaryRoute = router.$route({
default: {
$match: '',
},
account: {
$exact: true,
$query: {
id: true,
},
$children: {
details: true,
},
},
});import {Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';
import {BrowserHistory, NavLink} from '../../bld/library';
const history = new BrowserHistory();
const router = new Router(history);
const route = router.$route({
default: {
$match: '',
},
account: {
$exact: true,
$children: {
settings: true,
},
},
about: true,
});
@observer
export class App extends Component {import {Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';
import {BrowserHistory, Link, Route} from '../../bld/library';
const history = new BrowserHistory();
const router = new Router(history);
const route = router.$route({
default: {
$match: '',
},
account: {
$exact: true,
$children: {
details: true,
},
},
});
@observer
export class App extends Component {
render(): ReactNode {import {Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';
import {BrowserHistory, Link, Route} from '../../bld/library';
const history = new BrowserHistory();
const router = new Router(history);
const route = router.$route({
default: {
$match: '',
},
account: {
$query: {
id: true,
},
},
});
@observer
export class App extends Component {
render(): ReactNode {
return (import {RouteMatch, Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';
import {BrowserHistory, Link, Route} from '../../bld/library';
const history = new BrowserHistory();
const router = new Router(history);
const route = router.$route({
default: {
$match: '',
},
account: true,
about: true,
revert: true,
notFound: {
$match: RouteMatch.rest,
},
});
route.revert.$beforeEnter(() => false);
@observerimport {Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';
import {
BrowserHistory,
Link,
Route,
RouteComponentProps,
} from '../../bld/library';
const history = new BrowserHistory();
const router = new Router(history);
const route = router.$route({
default: {
$match: '',
},
account: {
$exact: true,
$query: {
id: true,
},
$children: {
details: true,
},
},
});import {RouteMatch, Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';
import {BrowserHistory, Link, Route} from '../../bld/library';
const history = new BrowserHistory();
const router = new Router(history);
const route = router.$route({
default: {
$match: '',
},
account: true,
profile: {
$exact: true,
$children: {
details: true,
},
},
about: {
$query: {
source: true,
},import {RouteMatch, Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';
import {BrowserHistory, Link, Route} from '../../bld/library';
const history = new BrowserHistory();
const router = new Router<'popup' | 'sidebar'>(history);
const primaryRoute = router.$route({
default: {
$match: '',
},
news: true,
about: {
$exact: true,
$children: {
test: true,
},
},
contact: true,
notFound: {
$match: RouteMatch.rest,
},boring-router
A type-safe MobX router with parallel routing support.
