Skip to content

Commit

Permalink
Update README.md (#190)
Browse files Browse the repository at this point in the history
* Update README.md

* Update README.md

change to point to main.jsx instead of index.js

* Update README.md

remove unnecessary extension

* Update README.md
  • Loading branch information
gcattan authored Feb 8, 2024
1 parent 97a17ca commit f39aeb1
Showing 1 changed file with 28 additions and 2 deletions.
30 changes: 28 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,30 @@ And if you haven't installed all the peer dependencies, you should probably do t
npm install --save mobx mobx-react react-router
```

Although, mobx v6 deprecated decorators, this library still requires to enable them.
Below is an example of configuration using `vite.js`:

```
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
target: 'es2015',
plugins: [
react({
babel: {
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
],
},
}),
],
});
```

For more details, please consult the documentation of [mobx v6](https://mobx.js.org/enabling-decorators.html) on decorators.


## Usage

`index.js`
Expand All @@ -41,7 +65,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { createBrowserHistory } from 'history';
import { Provider } from 'mobx-react';
import { RouterStore, syncHistoryWithStore } from 'mobx-react-router';
import { RouterStore, syncHistoryWithStore } from '@ibm/mobx-react-router';
import { Router } from 'react-router';
import App from './App';

Expand All @@ -58,7 +82,7 @@ const history = syncHistoryWithStore(browserHistory, routingStore);

ReactDOM.render(
<Provider {...stores}>
<Router history={history}>
<Router location={routingStore.location} navigator={history}>
<App />
</Router>
</Provider>,
Expand Down Expand Up @@ -88,6 +112,8 @@ export default class App extends Component {
}
```

Check our live [example](https://stackblitz.com/edit/github-bje76z-uyn64v?file=src%2Fmain.jsx).

### HashRouter

You can replace `history/createBrowserHistory` with `history/createHashHistory` in the example above to use hash routes instead of HTML5 routing.
Expand Down

0 comments on commit f39aeb1

Please sign in to comment.