DEV Community

loading...
Cover image for Netlify - Client Side Routing

Netlify - Client Side Routing

chrisotto profile image Chris Otto Originally published at chrisotto.dev on ・2 min read

I have a nice little side project based on the Goodreads API (yes, my key is still active). I had it up for a while and whenever I would refresh a page while it was deployed it would lose context to the page. This is because Netlify didn’t know how to handle the state I had gotten myself into because the routing in create-react-app that I was using was react-router.

Luckily enough this is an easy fix, so if you also have the following:

  • Create React App client-side routing through react-router
  • Deploy your site on Netlify

…then you will be able to make the same change and have your page context persist after refreshes!

Creating a Redirects File 💻

In your public directory create a new __redirects file with the following code:

/* /index.html 200
Enter fullscreen mode Exit fullscreen mode

Now when the project gets built by Netlify, Create-React-App will place the contents of the public directory into the build output. Allowing Netlify to handle pushState from within your application. That’s it!

Discussion (0)

pic
Editor guide