Breaking News: Grepper is joining You.com. Read the official announcement!

404 on refresh or manually change url react

Tender Turtle answered on April 17, 2022 Popularity 8/10 Helpfulness 3/10

answer 404 on refresh or manually change url react

related on refresh react url not working or 404 page not showing react

404 on refresh or manually change url react

Comment

// To solve this error, Follow these steps:
// 1: create a 404.html in public folder ( remember: public, not src folder )
//    and add past below html in it
// file: public/404.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Early Ordies</title>
    <script>
        sessionStorage.redirect = location.href;
    </script>
    <meta http-equiv="refresh" content="0;URL='/'">
</head>

<body>
</body>

</html>

// 2: Now you need to make changes to index.html that is in public folder in create-react-app
//    or root folder in react vite project.
//    Add this script tag in head tag, before any other script tag
<script>
    (function () {
      var redirect = sessionStorage.redirect;
      delete sessionStorage.redirect;
      if (redirect && redirect != location.href) {
        history.replaceState(null, null, redirect);
      }
    })();
</script>

// That's it. you're good to go.
// If you're on github pages, replace meta tag in 404.html with this one and add
// your repo name
<meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'">

https://www.smashingmagazine.com/2016/08/sghpa-single-page-app-hack-github-pages/

Popularity 8/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript refresh url

Link to this answer
Share Copy Link

Contributed on Apr 06 2023

Tender Turtle

0 Answers Avg Quality 2/10

Closely Related Answers

on refresh react url not working or 404 page not showing react

Comment

RewriteBase /
RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

//include this in .htaccess in root directory

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: 404-page 404-pag

Link to this answer
Share Copy Link

Contributed on Apr 17 2022

Thankful Tern

0 Answers Avg Quality 2/10

404 on refresh or manually change url react

Contents

More Related Answers

404 on refresh or manually change url react

Closely Related Answers

on refresh react url not working or 404 page not showing react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.