Have some trouble using this transition in react-router V4 and need help

[xuyl0104]

Hi Sir,

First, I want to show my respect to your because you created a great plugin, react-router-page-transition, to handle the react-router transition problems which is quite complicated and hard. I have some problems when I try to embed it into my project which uses "react-router-dom": "^4.2.2". I added Switch and passed location property to Switch, but noting happens. I get it work with react-router V3 and I think this is a problem with my project, but I cannot figure out where the bug is. So, could you please have a check for me?

I build the same project using codesandbox, you can access it here: https://codesandbox.io/s/jj8437qw13

Thannks very much.

Yunlong

[trungdq88]

Thank you for your time creating the minimal sample project, it really helps.

Your this.props.location is undefined, therefore the animation does not work. <Switch> component need to access the location object of React Router. In order to do that we need to get the location object from React Router.

In your example, I create a parent <Route> to wrap all your routing code, the only purpose of the parent <Route> is to get the location object. Check the code bellow:

      <Router>
        <Route
          render={({ location }) => (
            <PageTransition timeout={500}>
              <Switch location={location}>
                <Route exact path="/" component={List} />
                {/* <Route path="/list" component={List}/> */}
                <Route path="/item" component={Item} />
              </Switch>
            </PageTransition>
          )}
        />
      </Router>

Live working demo: https://codesandbox.io/s/vmjpyzzz83

The animation is working, but you need to work on your CSS to resolve the z-index issue tho. If have any trouble, please ping me.

[xuyl0104]

Thanks very much for your quick reply! It works! I made some modification to the code and the CSS transition effect works just fine. You can see it from here: https://codesandbox.io/s/z679wjr17x

But I find another problem. This problem occurs in my project and the project in issue #27 as well. When page A changes to page B, A will render first, then page B will render several times (more than 2). When I go back from B to A, B will be rendered and then A rendered several time. This problem is serious because it cost a lot of network resources. I noticed that your demo does not have this problem so I suppose this is a problem related with react-router V4. Maybe the way router is nested is the reason. I am working on this issue. Could you dig on it when you have some free time?

Thanks again for your help.

Yunlong

[trungdq88]

Multiple render happens when the props change, if you are using PageTransition with React Router 3 it can be manually set using data-transition-id, however this currently does not support React Router 4.

It's usually not a big problem because the component is still mounted/unmounted correctly, so if you are calling network requests in render() you probably need to move it to componentDidMount.

Also, you can use shouldComponentUpdate to prevent unnecessary renders. Check this: https://codesandbox.io/s/n3rrym5y1l

[xuyl0104]

Thank you for your reply. My solution is the same as yours. I set the network request function in componentDidMount(), then only one request is called, but render() is called several times. After I add the componentShouldUpdate(), all the problems are solved. Cool!

Please forgive my endless questions, but I want to ask another question. Imagine I have three pages, A, B and C. B will have two kind of leave action: from B to C and leave B back to A. It seems this will cause some bug when I set the className of B as "tramsform-item detail-page" or something. The transition effect show wrong transition directions. Please share with me what you think.

Thanks!

Yunlong

[trungdq88]

Imagine I have three pages, A, B and C. B will have two kind of leave action: from B to C and leave B back to A. It seems this will cause some bug when I set the className of B as "tramsform-item detail-page" or something

You are right. In order to achieve this we need to use the callbacks and pass custom data between pages. However this is not supported in React Router 4 yet. Sorry!

[xuyl0104]

Hi, really sad to hear I should use the callbacks to solve this. I'll try and find some tricks to solve this. Maybe using a list to store all the urls in the state and when POP or PUSH a url, detect whether it still exists in the list or not. When exist, I can tell it goes to a new page and I assign a className to it. If it does not exist anymore, then this page goes back to the previous page and I should give it another className. I hope this will offer some help.

I hope you can add callback to support react-router V4 when you have time. It will be a huge feature.

Thank you so much for your help. I wish RRPT be more popular and get more stars in the future (it really deserves that).

Yunlong