Problems using both redux and react-router v4

[steinarb]

I'm using both redux and react-router v4 and I've run into a problem: I get the redraw-on-change issue mentioned in the docs, and I can't add the data-transition-id property to the router setup:

            <Provider store={this.state.store}>
                <Router>
                    <PageTransition>
                        <Switch location={this.props.location}>
                            <Route exact path="/ukelonn/" component={Home} />
                            <Route path="/ukelonn/login" component={Login} />
                            <Route path="/ukelonn/user" component={User} />
                            <Route path="/ukelonn/performedjobs" component={PerformedJobs} />
                            <Route path="/ukelonn/performedpayments" component={PerformedPayments} />
                            <Route path="/ukelonn/admin" component={Admin} />
                        </Switch>
                    </PageTransition>
                </Router>
            </Provider>

I have tried the following, without success:

1. Adding 'data-transition-id': 'some-page' to the default props argument but got the syntax error "Invalid left-hand side in object destructuring pattern"
2. Adding data-transition-id="some-page" to the <Route> elements in <Switch>
3. Adding data-transition-id="some-page" to the top-most <div> of the component
4. Adding 'data-transition-id': 'some-page' to the defaultProps of the components

[trungdq88]

Hello, thank you for reporting this. I am not sure if the lib can work with react-router 4 when combined with redux, but if you could create an example on https://codesandbox.io to reproduce the problem, I can take a look and see what went wrong.

[steinarb]

This illustrates the problem: https://codesandbox.io/s/zlpm9wp874

Start typing in the username field of the Login window and the component starts redrawing.

[steinarb]

I tried to run the example now to try to remember what this issues was about. Unfortunately the Sandbox example won't run and the error message(s) don't make sense.

The example was working when I created it.

The error seems to be on the "." following ReactDOM in

ReactDOM.render(<App store={store} />, rootElement);

And the stack trace are:

PageTransition.componentDidMount
https://zlpm9wp874.codesandbox.io/node_modules/react-router-page-transition/lib/PageTransition.js:85:15
commitLifeCycles
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:9784:26
commitAllLifeCycles
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:11455:9
HTMLUnknownElement.callCallback
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:100:14
Object.invokeGuardedCallbackDev
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:138:16
invokeGuardedCallback
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:187:29
commitRoot
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:11594:9
completeRoot
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:12502:36
performWorkOnRoot
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:12452:11
performWork
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:12370:9
performSyncWork
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:12347:5
requestWork
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:12247:7
scheduleWorkImpl
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:12122:13
scheduleWork
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:12082:12
scheduleRootUpdate
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:12710:5
updateContainerAtExpirationTime
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:12738:12
Object.updateContainer
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:12765:14
ReactRoot.render
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:16069:15
eval
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:16488:14
Object.unbatchedUpdates
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:12557:12
legacyRenderSubtreeIntoContainer
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:16484:17
Object.render
https://zlpm9wp874.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:16543:12