push not working with react-redux 7.1.0-rc.1 - Hooks version

[kvedantmahajan]

import React from 'react';
import { push, Push } from 'connected-react-router'
import { connect } from 'react-redux';

interface HomeProps {
    dispatch: any;
}

const Home: React.FC<HomeProps> = ({ dispatch }: HomeProps) => {
    return (
        <div>
            <p>Home page</p>
            <nav>
                <button onClick={() => {
                    dispatch(push('/'));
                }}>Home</button>
                <button onClick={() => {
                    dispatch(push('/about'));
                }}>about</button>
            </nav>
        </div>
    )
}

export default connect(null)(Home);

Tried referencing this issue.

Funny part is I downgraded to 6.0.0 from 6.4.0 and followed the peer dependency as it is as defined in your package.json

       "history": "^4.7.2",
       "react": "^16.4.0",
        "react-redux": "^6.0.0",
        "react-router": "^4.3.1",
        "redux": "^3.6.0 || ^4.0.0"

Can you update something about it?

[diegofelipece]

Seems like the react-redux v7+ is not yet supported, but we're probably close
Take a look at #287

[bsell93]

It looks like #287 (support for v7) was closed, but I'm still not having luck.

In my wrapper around ConnectedRouter in my getDerivedStateFromProps function I am doing the following logic:

if (!props.isAuthenticated && !anonymousRoutePaths.includes(pathName)) {
    if (path === '/') {
        props.history.push(LOGIN_PATH);
    } else {
        props.history.push(`${LOGIN_PATH}?redirect=${encodeURI(path)}`);
    }
}

When I log the history.location data it logs as my login path, but the url (Note: I do notice the url flash to the correct url then go back 🤷‍♂ ) and "page" never changes.

Deps & Versions:

"connected-react-router": "^6.5.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"redux": "^4.0.1",

[bsell93]

Here is a codesandbox reproducing the specific issue I am having..
https://codesandbox.io/embed/react-router-hthx1

[bsell93]

Any thoughts @quarties or @supasate?

[bsell93]

Great news! I fixed the issue!
I was using push in getDerivedStateFromProps in the component that was rendering ConnectedRouter so push did nothing because the router wasn't rendered yet!

So instead I used componentDidMount and then things worked! 🎉

Hopefully this helps someone.

I updated the above codesandbox code with the fix and commented out the broken code

[kvedantmahajan]

I was not using in getDerivedStateFromProps. @supasate why would you close this?