{
  "$type": "site.standard.document",
  "path": "/updated-upgrading-to-react-router-v4-2/",
  "publishedAt": "2017-03-19T14:09:00.000Z",
  "site": "at://did:plc:6gssgguzeecdttuw4gpdshg2/site.standard.publication/self",
  "tags": [
    "react",
    "javascript",
    "router"
  ],
  "textContent": "My previous article on upgrading to react-router alpha4 is still getting a lot of traffic. Below is an updated version of that post for the release version of react-router v4.\n\nI decided to take a little bit of time and migrate my reactit demo app to v4 of react-router. I'll outline what changes I had to make for v4 as well as my thoughts on the new approach.\n\nMigrating\n\nWell, first things first. I installed the new version of react-router using npm.\n\n[Code block]\n\nThe big reason for this rewrite was 'Declarative Composability'. This means that routes are now just components. You might want to re-read that last sentence. This works really well in my demo app. The components themselves now define the composition of the UI.\n\nBefore all my routing was done in index.js. This is the same routing you see in most v2 apps.\n\n[Embedded code (GitHub Gist)]\n\nThe first thing I realised is that I can get rid of all this routing in index.js. We can just render the app and compose the UI based on the route. After removing all the routing index.js now looks like this:\n\n[Embedded code (GitHub Gist)]\n\nWhen using v2, it was the route in index.js that injected the correct children to be rendered based on the route.\n\n[Embedded code (GitHub Gist)]\n\nThis is where v4 starts to shine. Now I can compose the UI based on the path as part of the App component. This is a much more concise way to define what is happening in the application.\n\n[Embedded code (GitHub Gist)]\n\nWhile this is a very simple example with only two routes, you can quickly see the amount of forward thinking that has been put into v4. I'm already seeing some great use-cases that will be simpler (ex: side menus). It also feels more 'react' to have your routes be components.\n\nTesting\n\nIn order to give routes to my components during testing, I simply wrapped them in <MemoryRouter/>.\n\n[Embedded code (GitHub Gist)]\n\nAs always this code is available on GitHub. You can see the commit that updates 'reactit' to react-router v4 right here: https://github.com/brookslyrette/reactit/commit/12c03798710b2e47eeb24a4b743d5cf5e7d2a86a\n\nRead the original post with all embeds and interactive content at https://rants.broonix.ca/updated-upgrading-to-react-router-v4-2/",
  "title": "Upgrading to react-router v4"
}