react-snap redirect URL to new URL with '/' slash

Question

I've implemeted a react-snap to create static html. However, after implemetin the react-snap I noticed SEO issues which the old urls (which were index) have been redirected to new urls with slash

example :

This URL: https://do-calculate.com/calculator/en/percentage

Gets redirect to : https://do-calculate.com/calculator/en/percentage/

Crawling search engine see this as two different url. I want to prevent such behaviour and keep urls WITHOUT slash

Here is an example of my App.

const calculatorRoutes = [
  {
    // Gregorian age Arabic
    path: '/calculator/ar/agegregorian',
    component: lazy(() => import('./Components/Ar/HumanCalculator/AgeCalculatorGregorian')),
  },etc..
]


function App() {
  // Use the Router component to wrap everything
  return (
    <Router>
      <AppContent />
    </Router>
  );
}

function AppContent() {
  const location = useLocation();

  // Determine the current language based on the URL path
  const currentLanguage = location.pathname.includes('/en') ? 'en' : 'ar';
  console.log(location.pathname)

  return (
    <>
      {currentLanguage === 'ar' ? <Header /> : <HeaderEN />}
      <HomePageUpperCenterAds />

      <Routes>
        {calculatorRoutes.map((route, index) => (
          <Route
            key={index}
            path={route.path}
            element={<CalculatorWrapper component={route.component} />}
          />
        ))}

        <Route path="*" element={<LandingPage />} />
        <Route path="/ar" element={<LandingPage />} />
        <Route path="/en" element={<LandingPageEN />} />
      </Routes>
      {/* <Footer /> */}
    </>
  );
}

// Wrapper component for dynamically imported calculator components
function CalculatorWrapper({ component: Component }) {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Component />
    </Suspense>
  );
}

Index.js

import { hydrate, render } from "react-dom";
import App from "./App";  // Import your main App component here.

const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
  hydrate(<App />, rootElement);
} else {
  render(<App />, rootElement);
}

Crawling search engine see this as two different url. I want to prevent such behaviour and keep urls with slash

Answer 1

If you are dealing with client-side routing and want to avoid the trailing slash redirection, you can modify the useEffect in your App component to check if the URL has a trailing slash, and if it's not the root URL, then navigate to the URL without the trailing slash. This can be achieved using the useNavigate hook from react-router-dom.

import React, { useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation, useNavigate } from 'react-router-dom';

// ... (your other imports)

function App() {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    // Check if the current URL has a trailing slash
    if (location.pathname.endsWith('/') && location.pathname !== '/') {
      // Navigate to the URL without the trailing slash
      navigate(location.pathname.slice(0, -1));
    }
  }, [location.pathname, navigate]);

  // Rest of your App component
  return (
    <Router>
      <AppContent />
    </Router>
  );
}

// ... (rest of your components)

This approach avoids the redirection by only navigating to the URL without the trailing slash if it originally had one. It relies on client-side navigation.

Keep in mind that I've never used react-snap before, so I don't know if this will solve your problem.