Moving from react router 3.x to 4.x

Question

How can I move to using https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.min.js from using https://cdnjs.cloudflare.com/ajax/libs/

Answer 1

You certainly can, but you would need to rewrite some of your components and application logic because your code will not run as it is currently.

Have a read on the official documentation, here. There's also a good FAQ about these changes, here. Here's an excerpt:

Why the huge change?

tl;dr Declarative Composability.

We've never been this excited about React Router. Like you, we've learned a lot about React since we first picked it up. We built a Router the best we knew how along the way. What we've learned most is that we love React because of its declarative composability.

If you want to upgrade, there is an upgrade guide coming soon, according to an official source:

We believe very strongly in iterative migration, not rewrites, for applications. We are working on a migration guide, but the basic strategy is that both versions will be runnable in tandem (due to npm limitations, we'll publish the previous version separately so both can be installed).

You will be able to take routes one-by-one and migrate them to the new API. Additionally, the config addon mentioned above may help out here.

---

With that in mind, going back to your original issue: to make your App component run properly, it should now look something like:

const App = props => 
  

    
      Map
      Settings
      Foo
    
    {props.children}
  

  
  
  
  

Hope this helps. Good luck.

---

edit: Apparently @PaulS has an example for a future version of React-Router v4. If the post is accurate, the above code will not work in the future; it will only work for the current version available. Keep an eye out on the linked pages above for info when RRv4 goes live.