Search code examples
reactjsreduxreact-routerreact-reduxreact-router-redux

Remove queryKey from hashHistory react-router-redux


I've found several places that say to set queryKey: false, but I can't find where to set that with the specific packages I'm using. Here's my current setup:

import { hashHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import createStore from './store/createStore'

const store = createStore(initialState, hashHistory)
const history = syncHistoryWithStore(hashHistory, store, {
  selectLocationState: (state) => state.router
})

Solution

  • example with { queryKey: false }

    import React from 'react'
    import ReactDOM from 'react-dom'
    import { createStore, combineReducers, applyMiddleware } from 'redux'
    import { Provider } from 'react-redux'
    import reducers from '<project-path>/reducers'
    
    import { createHashHistory } from 'history'
    import { Router, Route, useRouterHistory } from 'react-router'
    
    import { syncHistoryWithStore, routerReducer,routerMiddleware, push } from 'react-router-redux'
    
    
    // Apply the middleware to the store
    const reduxRouterMiddleware = routerMiddleware(browserHistory)
    
    const store = createStore(
        combineReducers({
          ...reducers,
          routing: routerReducer
      }),
      initialState,
      applyMiddleware(reduxRouterMiddleware)
    )
    //set { queryKey: false }
    const appHashHistory = useRouterHistory(createHashHistory)({ queryKey: false })
    
    // Create an enhanced history that syncs navigation events with the store
    const history = syncHistoryWithStore(appHashHistory, store)
    
    ReactDOM.render(
      <Provider store={store}>
        { /* Tell the Router to use our enhanced history */ }
        <Router history={history}>
          <Route path="/" component={App}>
            <Route path="foo" component={Foo}/>
            <Route path="bar" component={Bar}/>
          </Route>
        </Router>
      </Provider>,
      document.getElementById('mount')
    )