Roadmap 5.x

This issue is a roadmap for all work on the 5.x branch.

• [x] Rewrite all with TS
• [x] Support history v5.x
• [x] Support react-router v6.x
• [x] Deprecate/remove oldLocationChangePayload
• [x] Test coverage 100%
• [x] Better docs

if you have any ideas... now's the time! Let's discuss.

In an app I'm building, I needed to know the previous url to properly animate certain transitions. I've been using redux-first-history for many months now (thanks for maintaining this library!) and assumed that it would have a history array within the generated reducer state, given the name of the library - but it doesn't.

I've built a little ContextProvider for my own app using the location: { pathname } from redux-first-history that simply maintains the current pathname and the previous pathname. I think redux-first-history could become more useful to more people if it simply pushed the current pathname to a pathnameHistory array in the state (optionally enabled with a flag) every time the location changed (and popped the last pathname whenever a user goes back). Seems like something very simple to implement that could be useful for particular applications. :)

Or at the very least - some equivalent of document.referrer (which doesn't really exist in the context of a Single Page App) would go a long way.

I'm happy with my own Context centric solution, but I figured I'd share this thoughts here in case it resonated with anybody else. :)

I would like the react router basename, if set, to be removed from payload.location.pathname in LOCATION_CHANGE redux actions created by router navigation.

I would also like push(LOCATION_CHANGE) to navigate to the correct place in the router, when the basename is omitted from payload.location.pathname.

This is related to https://github.com/salvoravida/redux-first-history/issues/87

This error seems to occur under very specific circumstances: CodeSandbox example

• Navigating to /redirect using either
  • The third <NavLink/>
  • "Native Navigate" using useNavigate() hook
  • "Navigate with Redux" using dispatch(push(..))
  • Navigating to /redirect using the address bar (in the CodeSandbox browser)

will crash the App and display

Error

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Modifications to the Example that will stop the App from crashing

• Using render from "react-dom" instead of createRoot() in index.tsx, the app will behave as if it's running React 17
• Using useNavigate() instead of <Navigate/> (swap the <Route/> for /redirect in MainContent.tsx with the commented one, which uses <NavigateWithHook/>)
• Not using redux-first-history, for example by replacing <HistoryRouter> with <BrowserRouter/> in App.tsx from react-router-dom
• And strangely using useLocation() instead of useSelector() in MainContent.tsx with the state of the router

Modifications to the Example that will NOT stop the App from crashing

• <StrictMode/> in React 18 unmounts and remounts every component once after the initial render in dev mode. But disabling Strict Mode in index.tsx will still cause the app to crash

Hello.

I am using this library, and I have problem with it. I am using it with react-route v6. the version of this library is 5.0.8 I have same config than in the example, but when I change between webpages, i see this:

my store is:

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from 'redux-saga';
import { createBrowserHistory } from 'history';
import { createReduxHistoryContext } from 'redux-first-history';
import { redesign } from './redesign/redux/reducers';
import { v04 } from './redesign/redux/reducers/v04';
import sagas from './sagas';

const sagaMiddleware = createSagaMiddleware();
const historyApi = createBrowserHistory();

const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({
  history: historyApi,
  savePreviousLocations: 10
});

export const store = createStore(
  combineReducers({
    router: routerReducer,
    redesign,
    v04
  }),
  composeWithDevTools(
    applyMiddleware(sagaMiddleware),
    applyMiddleware(routerMiddleware)
  )
);

sagaMiddleware.run(sagas);
export const history = createReduxHistory(store);

The router is like:

import { history } from './store';
import { HistoryRouter as Router } from 'redux-first-history/rr6';

const App = () => {
  return (
   <Router history={history}>
      ...
   </Router>
  );
}

And inside the routes:

const component = () => {
  ...
  return (
    <Routes>
      <Route path="/" element={<Navigate to="/homepage" replace />} />
      <Route path="homepage" element={<StartPage />} />
      ...
      <Route path="*" element={<NotFound />} />
  );
}

I am think I am skiping something easy and short. but I cannot fin it. This is happening when I am updating to v6 of react and also this library to last version. After error, if I reaload the page, page works. Also, I am looking in the redux, the state of path doesnt change. Before yes.

Thanks for your time.

Kind regards.

Hello, I saw your library a couple of days ago and it was just what I was looking for. It works perfectly with redux-toolkit and react-router-dom. However, I have a question regarding other history types. So far, you are supporting createBrowserHistory. I am trying to package my react app using electron-pack as a desktop application, and it's known that electron supports MemoryHistory and HashHistory but not BrowserHistory. I tried using MemoryHistory and HashHistory with redux-first-history but apparently neither work. Do you think there us a way to do it or will you at least support in future versions?

Thank you

Hi there,

first of all thanks for providing this package!

However, I have a small issue and I'm not sure if it my setup or anything else. Following your docs I want to dispatch a location change from a saga (use push action creator from redux-first-history if you need to dispatch location from saga or connected components.). I'm using react-router v6.

# mysaga.ts
import { push } from "redux-first-history"
...

function* redirect() {
  yield put(push("/somewhere"))
}

function* watchSomething() {
  yield takeLatest(MyActionType.SOME_ACTION, redirect)
}

export function* mySaga() {
  yield all([
    fork(watchSomething)
  ])
}

The action is executed, but there is no redirect:

Why does it behave this way? Hope you can shed a light, thanks!

Here is my store setup:

const { createReduxHistory, routerMiddleware, routerReducer } =
  createReduxHistoryContext({
    history: createBrowserHistory(),
  })

const sagaMiddleware = createSagaMiddleware()
const initialState = window.INITIAL_REDUX_STATE

export const store = createStore(
  combineReducers({
    authentication: authenticationReducer,
    employees: employeesReducer,
    layout: layoutReducer,
    router: routerReducer,
  }),
  initialState,
  composeWithDevTools(
    applyMiddleware(routerMiddleware),
    applyMiddleware(sagaMiddleware)
  )
)

sagaMiddleware.run(rootSaga)

export const history = createReduxHistory(store)

Hello. Good library a lot of thanks.

I have one question i used library https://github.com/mjrussell/redux-auth-wrapper#readme

i have some code.

import { connectedReduxRedirect } from 'redux-auth-wrapper/history3/redirect';
import { push } from 'redux-first-history';

export const UserIsAuthenticated = connectedReduxRedirect({
  redirectPath: 'login',
  authenticatedSelector: (state) => !isEmpty(state.global.get('currentUser').toJS()),
  redirectAction: push,
  wrapperDisplayName: 'UserIsAuthenticated',
  allowRedirectBack: false,
});

but redirect to login route incorrect. I gettting loginnull instead login I debugging code and i noticed. if hash: null then i have incorrect route. I checked if hash: undefined then all good. Could you help me. Maybe i something understand.

I couldn't find any example how to set this up with reach router. Can you give me a simple example how to apply the reachify history to the reach router?

Hello, thank you for this repo! I was directed here based on your comment of using redux-first-history instead of connected-react-router. I wanted to ask, because I feel like I'm following your instructions properly, but I'm running into a strange error. Here is what I have. Everything is pretty much boilerplate from what's in the README:

store.js (with @reduxjs/toolkit)

import { combineReducers } from "redux";
import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import { createHashHistory, createBrowserHistory } from "history";
import { createReduxHistoryContext } from "redux-first-history";

const { routerMiddleware, createReduxHistory, routerReducer } = createReduxHistoryContext({
  history: createHashHistory()
});

export const store = configureStore({
  reducer: combineReducers({
    router: routerReducer
  }),
  middleware: [...getDefaultMiddleware({
    serializableCheck: false
  }), routerMiddleware]
});

export const history = createReduxHistory(store);

app.js (react-router v6)

import React from "react";
import { HistoryRouter } from "redux-first-history/rr6";
import { Provider } from "react-redux";
import AppRoutes from "Core/routes";
import Nav from "./nav";
import "./root.css";

class Root extends React.Component {
  render() {
    const { store, history } = this.props;
    
    return (
      <React.Fragment>
        <Provider store={store}>
          <HistoryRouter history={history}>
            <Nav history={history}></Nav>
            <AppRoutes></AppRoutes>
          </HistoryRouter>
        </Provider>
      </React.Fragment>
    );
  }
}

export default Root;

routes.jsx

import React from "react";
import { Routes, Route } from "react-router";
import ROUTES from "Constants/routes";
import loadable from "@loadable/component";

// Load bundles asynchronously so that the initial render happens faster
const Welcome = loadable(() =>
  import(/* webpackChunkName: "WelcomeChunk" */ "Pages/welcome/welcome")
);
const About = loadable(() =>
  import(/* webpackChunkName: "AboutChunk" */ "Pages/about/about")
);

class AppRoutes extends React.Component {
  render() {    
    return (
      <Routes>
        <Route path={ROUTES.WELCOME} element={<Welcome />}></Route>
        <Route path={ROUTES.ABOUT} element={<About />}></Route>        
      </Routes>
    );
  }
}

export default AppRoutes;

welcome.jsx

import React from "react";
import ROUTES from "Constants/routes";
import { Link } from "react-router-dom";

class Welcome extends React.Component {
  render() {
    return (
      <React.Fragment>
        <section className="section">
          <div className="container">
            <h2 className="title is-2">Samples</h2>
            <div>
              <Link to={ROUTES.ABOUT}>About page</Link> <br />
            </div>
          </div>
        </section>
      </React.Fragment>
    );
  }
}

export default Welcome;

about.jsx

import React from "react";

class About extends React.Component {
  render() {
    return (
      <section className="section">
          <div className="container">
              <h1 className="title is-1">About</h1>
          </div>          
      </section>
    );
  }
}

export default About;

My app loads fine, but as soon as I try to navigate to another page I get this error Cannot read properties of undefined (reading 'pathname'). I can't figure out if this is an error in redux-first-history or somewhere else. This comment makes me feel like <HistoryRouter> needs to support something like this (but I'm not entirely sure).

<HistoryRouter location={history.location} navigator={history}>

Can you point me in the right direction?

repro steps

I made a small POC repo where this can be replicated https://github.com/reZach/react-router-v6-upgrade

Hi, Updating react-router from V5 to V6 I moved to redux-first-history because connected-react-router does not support react-router V6. I also updated history to v5 because it is the version used in react-router v6. But compiling I have the folowing issue with redux-first-history :

node_modules/redux-first-history/build/es6/actions.d.ts(9,19): error TS2315: Type 'Location' is not generic.
node_modules/redux-first-history/build/es6/create.d.ts(2,46): error TS7016: Could not find a declaration file for module '@reach/router'. '/opt/atlassian/pipelines/agent/build/code/node_modules/@reach/router/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/reach__router` if it exists or add a new declaration (.d.ts) file containing `declare module '@reach/router';`
node_modules/redux-first-history/build/es6/reachify.d.ts(1,41): error TS7016: Could not find a declaration file for module '@reach/router'. '/opt/atlassian/pipelines/agent/build/code/node_modules/@reach/router/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/reach__router` if it exists or add a new declaration (.d.ts) file containing `declare module '@reach/router';` 

I kinda find wierd that I would have to install types from another router to use RFH with react-router. But I probably missing something... On the other hand Location type used to be generic but isn't anymore.

Seems like push and replace functions only accept location: LocationDescriptorObject<HistoryLocationState> as a parameter. In History interface they are overloaded, for example push function:

push(path: Path, state?: HistoryLocationState): void;
push(location: LocationDescriptorObject<HistoryLocationState>): void;

And then it is declared like this:

export declare const push: (...args: Parameters<History['push']>) => CallHistoryMethodAction<Parameters<History['push']>>;

But when declaring function parameters like this, only the last overload is used, hence I can't just pass a path string to the function but only a location object.

Hi,

I am getting the error in the title. I can fix it by wrapping from the package with , but that's against the documentation and the provided example there.

Can you please help me out, what could have I done wrong here?

I have application.

And when i change router - redux store does not change

Example: https://codesandbox.io/s/crazy-darwin-s112t4

I use redux-logger and there are no LOCATION_CHANGE messages in console

• goBack and goForward methods are no longer exist in history v5 types. Build process is crashing
• new back and forward actions are not exported from index.ts

In previous version of history package the basename was also used for making location.pathname relative to basename, see history v4 api

For example with basename /foo/bar/id and url /foo/bar/id/baz the pathname will be /baz

Then in the 5th version they removed basename support silently.

I am seeing that you've added support for basename in v5.1.0

So I am wondering are there any plans to expose relative pathname under router.location in redux store?

Hey team - was just wondering if there's any planned support for react-router v6.4.0?

After attempting to migrate to their newer method of wiring up routes, it appears it requires a whole new provider to be used, which doesn't seem to require creating the history instance to provide it - I'm assuming it now does it internally. Not too sure what changes would be required within redux-first-router to support this new way of wiring up the router, but at present due to the internal abstraction of history within react-router's new API it doesn't seem to be possible to integrate it with redux-first-history.

Any updates on this would be greatly appreciated 🙏