Skip to content

Commit

Permalink
feat: support for route not found redirect
Browse files Browse the repository at this point in the history
BREAKING CHANGE:

1. Router instantiation
Now the constructor has a single argument.

You should call it:
new Router({routes: myRoutes, otherOptions...})
(before: new Router(routes, {options...}))

2. For trying to unify plugins API:
Now call html5HistoryPlugin.register(router)
instead of html5HistoryPlugin.createHistory()
  • Loading branch information
AoDev committed Apr 19, 2019
1 parent 4c34a9f commit add14bb
Show file tree
Hide file tree
Showing 7 changed files with 2,480 additions and 2,148 deletions.
39 changes: 23 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Bard router

[![npm version](https://badge.fury.io/js/bard-router.svg)](https://badge.fury.io/js/bard-router)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

**Routing solution for React/Mobx applications**.

Expand Down Expand Up @@ -310,22 +311,7 @@ router.goBack()
## Using browser html5 history
You can synchronize the router with the browser history / URL.
You simply need to use the `html5HistoryPlugin`. Under the hood, it is using [ReactTraining history](https://github.com/ReactTraining/history).
Here is an example using ES6 and the MobxRouter.
```js
import MobxRouter from 'bard-router/src/mobx/MobxRouter'
import html5HistoryPlugin from 'bard-router/src/html5HistoryPlugin'
import myRoutes from './myRoutes'

const router = new MobxRouter(myRoutes, {
historyPlugin: html5HistoryPlugin,
})
```
If needed, you can access the `history` instance of [createBrowserHistory from ReactTraining history](https://github.com/ReactTraining/history#usage) at `router.history`.
[Check the html5HistoryPlugin](https://github.com/AoDev/bard-router/tree/master/src/plugins)
## Recipes / FAQ
Expand All @@ -351,3 +337,24 @@ Use the `on('nav')` hook.
```js
router.on('nav', () => window.scrollTo(0, 0))
```
### How to handle 404 / not found?
1. Set the `routeNotFound` option that should be the route to redirect to.
```js
const router = new MobxRouter({
routeNotFound: '/not-found',
/*...*/
})
```
2. Have a defined corresponding route
```js
{
'/not-found': {},
}
```
3. Add a corresponding Route + Component in your UI
```js
<Route path="/not-found" Component={NotFound}/>
```
Loading

0 comments on commit add14bb

Please sign in to comment.