trungdq88 / react-router-page-transition

Highly customizable page transition component for your React Router
https://trungdq88.github.io/react-router-page-transition
MIT License
542 stars 53 forks source link

Unable to access wrapped instance #20

Closed FKSI closed 7 years ago

FKSI commented 7 years ago

Hi

I'm trying to implement this great module. But I got that error:

To access the wrapped instance, you need to specify { withRef: true } in the options argument of the connect() call.

Any idea?

trungdq88 commented 7 years ago

Can you post some code?

amanda-t commented 7 years ago

@FKSI You need to specify the withRef option in connect. For example, my HomeView component has a container called HomeViewContainer.js:

import { connect } from 'react-redux'

import HomeView from '../components/HomeView'

const mapDispatchToProps = {
}

const mapStateToProps = (state) => ({
})

export default connect(mapStateToProps, mapDispatchToProps, null, { withRef: true })(HomeView)

https://github.com/reactjs/react-redux/blob/master/docs/api.md

I was running into the same error and did this to fix it, but after doing this I got another error: Uncaught (in promise) TypeError: Cannot read property 'onTransitionWillStart' of null at willStart

which seems to be due to the fact I was using stateless functional components:

const HomeView = () => (
  <div data-transition-id='home-page' className='transition-item'>
     ...
  </div>
)

So I ended up switching to the class syntax:

import React, { Component } from 'react'

class HomeView extends Component {
  render () {
    return (
      <div data-transition-id='home-page' className='transition-item'>
        ...
     </div>
    )
  }
}

And deleting HomeViewContainer with the connect call altogether.

nontachaiwebdev commented 7 years ago

I got this error too Now i try to fix it !

FKSI commented 7 years ago

@amanda-t Many thanks for you anwser. I more or less experienced the same issues as you and didn't want to switch syntax :/ I ended up with another lib for my transitions. :)