React Router - Content disappear on refresh (client route access)

Issue - React Router is client side routing and when a url is requested to server, it has no such route.

Discussion

Fixes

  1. HashRouter - has # before all routes, clever hack, ugly and issues with google console redirect url.
  2. Express server to distribute static assets.
  3. …alot more here for webpack on dev servers, apache server.

Usabe Fixes

  1. _redirects file on public folder with following content.
1

/*  /index.html  200

worked on netlify

  1. Vendor specific solutions

  2. Netlify
    netlify.toml file on root directory with the following content:

    1
2
3
4
5

    [[redirects]]
from = "/*"
to = "/index.html"
status = 200
force = false

    reference

  3. Vercel
    vercel.json file on root directory with the following content:

    1
2
3

    {
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

    reference

  4. Firebase
    firebase.json file on root directory with the following content:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

    {
  "hosting": {
    "rewrites": [
      {
        "source": "*",
        "destination": "/index.html"
      }
    ]
  }
}

    reference