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
