CODEWITHSUNDEEP
reactjsreact-router-dom
user2024080
user2024080

Reputation: 5091

Reactjs - not reloading the page, instead getting `Not Found` page. how to fix this?

this is my domain https://tantum-pm.com on refresh it works find in local. after upload the site, when i refresh it's not loading the current page. instead getting an error as "404 page not found" how to fix this?

here is my router details :

import React, { Suspense, FC} from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";

import "./styles/layout.scss";
import "./styles/global.scss";
import {Layout } from "./components/layout";

const Home = React.lazy(() => import("./components/page-home/home.component"));
const Aboutus = React.lazy(() => import("./components/page-about-us/about-us.component"));
const WhatWeDo = React.lazy(() => import("./components/page-what-we-do/what-we-do.component"));
const Projects = React.lazy((() => import("./components/page-projects/projects.component")));
const ContactUs = React.lazy(() => import("./components/page-contact-us/contact-us.component"));


const App:FC = () => {
    return (
    
        <Router>
            <Layout>
            <Switch>
                <Suspense fallback={<div>Loading...</div>}>
                    <Redirect exact from="/" to="/home" />
                    <Route path="/home">
                        <Home />
                    </Route>
                    <Route path="/about-us">
                        <Aboutus show={-1} />
                    </Route>
                    <Route path="/what-we-do">
                        <WhatWeDo />
                    </Route>
                    <Route path="/projects">
                        <Projects />
                    </Route>
                    <Route path="/contact-us">
                        <ContactUs />
                    </Route>
                </Suspense>
            </Switch>
            </Layout>
        </Router>

    )
};

ReactDOM.render(<App />, document.getElementById("root"));

what is the change do i required to do here? thanks in advance

I am using react-router-dom": "^5.1.6",

Upvotes: 0

Views: 101

Answers (2)

Oreol Noumodong
Oreol Noumodong

Reputation: 349

Create a new .htaccess file in your htdocs directory (or example.com/htdocs/ directory)

Insert this:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

RewriteRule path can be: index.php index.html index.htm index2.html, etc.

Upvotes: 1

Soheb
Soheb

Reputation: 932

You can change your .htaccess file and insert this

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

You may also want to check what is .htaccess?

Upvotes: 1

Related Questions