loink
loink

Reputation: 11

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

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

Upvotes: 1

Views: 301

Answers (0)

Related Questions