Question 193669 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – react application breakdwon after reloading into routed page with react-router-dom

I’m using react with VITE and react-router-dom
Hosting the react application locally works very well, if it hosted on any online hosts services like NETLIFY, VERCEL or HOSTINGER also works great but if I passed to a new routed page used by react-router-dom it works fine until I reload the page that routed it crash even on many times of reloading still crashed but if I seped back to the home routed page "/" it works fine even with reloading

error message => GET https://planandresults.vercel.app/services 404

application repo: => https://github.com/sfwnisme/planandresults
application hosted by vercel: => https://planandresults.vercel.app/

the App() file

function App() {
  const location = useLocation();
  const [t, i18n] = useTranslation();
  if (i18n.language === "en") {
    document.documentElement.style.direction = "ltr";
    document.documentElement.setAttribute("lang", "en");
  } else if (i18n.language === "ar") {
    document.documentElement.style.direction = "rtl";
    document.documentElement.setAttribute("lang", "an");
  }

  //----------
  useEffect(() => {
    Aos.init();
  }, []);

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);

  //----------
  console.log("App.jsx:", "Render App.jsx");

  return (
    <div
      className={`App bg-white ${
        i18n.language === "en" ? "font-sf" : "font-almaria"
      } text-white`}
    >
      <Routes>
        <Route
          path="/"
          element={
            <div className=" LANDING_PAGE mx-auto">
              <Header />
              <Services />
              <About />
              <WhyUs />
              <Partners />
              <Contact />
              <Footer />
            </div>
          }
        />

        <Route path="/services" element={<ServicesSection />} />
        <Route path="/services/service-0" element={<ServiceZero />} />
        <Route path="/services/service-1" element={<ServiceOne />} />
        <Route path="/services/service-2" element={<ServiceTwo />} />
        <Route path="/services/service-3" element={<ServiceThree />} />
        <Route path="/services/service-4" element={<ServiceFour />} />
        <Route path="/services/service-5" element={<ServiceFive />} />
        <Route path="/services/service-6" element={<ServiceSix />} />
        <Route path="/services/service-7" element={<ServiceSeven />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/partners" element={<PartnersPage />} />
      </Routes>
    </div>
  );
}

normally tried to pass into routed page from my application it works fine but when I reload the page it gives me an console error GET https://planandresults.vercel.app/services 404 and display error message from the hosting service vercel by this images below
host service error message

really I could not expect this issue it seems weird to me cause I’m newpie with React

Tags:

2

Answers


  1. 0

    you need to add htaccess file to your projcet root folder to redirect all requests to index.html file and then the react-router-dom will handle the route for you.
    to add the file create new file named .htaccess and write inside the following code:

    RewriteEngine on
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_URI} !.(gif|jpe?g|png|css|js)$
RewriteRule .* index.html [L,R=302]

    i didn’t test the code because i don’t have such hosting but if there is any error just comment and i will help you resolve it.

    Login or Signup to reply.
  2. 0

    The .htaccess file works only on apache servers, so I do not think it will work in this case.

    Add a vercel.json file at the root of your project, and use "rewrites" to rewrite all incoming paths to refer to your index path.

    For example:

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

    Check here for further information: https://vercel.com/docs/configuration#project/rewrites

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search