From e3643217dea1233c40408eed9da0210247cf3625 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A1ssio=20Zen?= Date: Fri, 15 Jul 2016 15:05:04 -0300 Subject: [PATCH] setting base href support for router --- package.json | 4 ++-- src/actions/findbar.js | 9 ++++----- src/components/EntryListing.js | 6 +++--- src/index.js | 11 +++++++++-- src/routes/routes.js | 19 ------------------- src/routing/history.js | 15 +++++++++++++++ src/routing/routes.js | 17 +++++++++++++++++ src/store/configureStore.js | 7 +++---- 8 files changed, 53 insertions(+), 35 deletions(-) delete mode 100644 src/routes/routes.js create mode 100644 src/routing/history.js create mode 100644 src/routing/routes.js diff --git a/package.json b/package.json index fae8a986..defae628 100644 --- a/package.json +++ b/package.json @@ -53,8 +53,8 @@ "react-lazy-load": "^3.0.3", "react-pure-render": "^1.0.2", "react-redux": "^4.4.0", - "react-router": "^2.0.0", - "react-router-redux": "^3.0.0", + "react-router": "^2.5.1", + "react-router-redux": "^4.0.5", "redux": "^3.3.1", "redux-thunk": "^1.0.3", "style-loader": "^0.13.0", diff --git a/src/actions/findbar.js b/src/actions/findbar.js index b231b46f..77053ada 100644 --- a/src/actions/findbar.js +++ b/src/actions/findbar.js @@ -1,4 +1,4 @@ -import { browserHistory } from 'react-router'; +import history from '../routing/history'; import { SEARCH } from '../containers/FindBar'; export const RUN_COMMAND = 'RUN_COMMAND'; @@ -10,21 +10,20 @@ export function run(commandName, payload) { return { type: RUN_COMMAND, command: commandName, payload }; } - export function runCommand(commandName, payload) { return (dispatch, getState) => { switch (commandName) { case LIST_POSTS: - browserHistory.push('/collections/posts'); + history.push('/collections/posts'); break; case LIST_FAQ: - browserHistory.push('/collections/faq'); + history.push('/collections/faq'); break; case HELP: window.alert('Find Bar Help (PLACEHOLDER)\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.'); break; case SEARCH: - browserHistory.push('/search'); + history.push('/search'); break; } dispatch(run(commandName, payload)); diff --git a/src/components/EntryListing.js b/src/components/EntryListing.js index 130f1cd2..712c0c08 100644 --- a/src/components/EntryListing.js +++ b/src/components/EntryListing.js @@ -1,7 +1,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import Bricks from 'bricks.js' -import { browserHistory } from 'react-router'; +import Bricks from 'bricks.js'; +import history from '../routing/history'; import Cards from './Cards'; export default class EntryListing extends React.Component { @@ -57,7 +57,7 @@ export default class EntryListing extends React.Component { return React.createElement(card, { key: entry.get('slug'), collection: collection, - onClick: browserHistory.push.bind(this, link), + onClick: history.push.bind(this, link), onImageLoaded: () => this.bricksInstance.pack(), text: entry.getIn(['data', collection.getIn(['card', 'text'])]), image: entry.getIn(['data', collection.getIn(['card', 'image'])]), diff --git a/src/index.js b/src/index.js index 40da4d74..79fea2e0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,10 @@ import React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; +import { Router } from 'react-router'; import configureStore from './store/configureStore'; -import Routes from './routes/routes'; +import routes from './routing/routes'; +import history, { syncHistory } from './routing/history'; import 'file?name=index.html!../example/index.html'; import './index.css'; @@ -12,8 +14,13 @@ const el = document.createElement('div'); el.id = 'root'; document.body.appendChild(el); +// Create an enhanced history that syncs navigation events with the store +syncHistory(store); + render(( - + + {routes} + ), el); diff --git a/src/routes/routes.js b/src/routes/routes.js deleted file mode 100644 index 50a798d6..00000000 --- a/src/routes/routes.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { Router, Route, IndexRoute, browserHistory } from 'react-router'; -import App from '../containers/App'; -import CollectionPage from '../containers/CollectionPage'; -import EntryPage from '../containers/EntryPage'; -import SearchPage from '../containers/SearchPage'; -import NotFoundPage from '../containers/NotFoundPage'; - -export default () => ( - - - - - - - - - -); diff --git a/src/routing/history.js b/src/routing/history.js new file mode 100644 index 00000000..12a7b087 --- /dev/null +++ b/src/routing/history.js @@ -0,0 +1,15 @@ +import { createHistory } from 'history'; +import { useRouterHistory } from 'react-router'; +import { syncHistoryWithStore } from 'react-router-redux'; + +const base = document.querySelector('base'); +let history = useRouterHistory(createHistory)({ + basename: base && base.href || '' +}); + +const syncHistory = (store) => { + history = syncHistoryWithStore(history, store); +}; + +export { syncHistory }; +export default history; diff --git a/src/routing/routes.js b/src/routing/routes.js new file mode 100644 index 00000000..39f1bf81 --- /dev/null +++ b/src/routing/routes.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { Route, IndexRoute } from 'react-router'; +import App from '../containers/App'; +import CollectionPage from '../containers/CollectionPage'; +import EntryPage from '../containers/EntryPage'; +import SearchPage from '../containers/SearchPage'; +import NotFoundPage from '../containers/NotFoundPage'; + +export default ( + + + + + + + +); diff --git a/src/store/configureStore.js b/src/store/configureStore.js index 3107dba0..d7552c00 100644 --- a/src/store/configureStore.js +++ b/src/store/configureStore.js @@ -1,16 +1,15 @@ import { createStore, applyMiddleware, combineReducers, compose } from 'redux'; import thunkMiddleware from 'redux-thunk'; -import { browserHistory } from 'react-router'; -import { syncHistory, routeReducer } from 'react-router-redux'; +import { routerReducer } from 'react-router-redux'; import reducers from '../reducers'; const reducer = combineReducers({ ...reducers, - router: routeReducer + routing: routerReducer }); const createStoreWithMiddleware = compose( - applyMiddleware(thunkMiddleware, syncHistory(browserHistory)), + applyMiddleware(thunkMiddleware), window.devToolsExtension ? window.devToolsExtension() : (f) => f )(createStore);