Search code examples
routesreactjsmaterial-designreact-routermaterial-design-lite

In react-router, when I change a router, Material design lite(MDL) doesn't work

https://www.youtube.com/watch?v=byUS_CUBELk&feature=youtu.be

I uploaded the video for my problem.

When you watch the 23~26sec section, you can watch the material design is working!

However, when you watch the 27~30 sec section, you can watch the material design is not working!

How can I fix it?

Why does the route changing cause this problem??

Help me ~ :)

Solution

  • I think your problem is that your MDL elements are not properly getting upgraded when you switch routes. This happens normally when your app is first loaded, but might not happen on changing routes if you aren't using componentHandler.upgradeDom(); inside of your componentDidUpdate function on your components.

    This article explains the issue pretty well:

    http://quaintous.com/2015/07/09/react-components-with-mdl/