feat: migrate from HashRouter to BrowserRouter for SEO

Phase 1: WordPress Rewrite Rules
- Add rewrite rule for /store/* to serve SPA page
- Add use_browser_router setting toggle (default: true)
- Flush rewrite rules on settings change

Phase 2: React Router Migration
- Add BrowserRouter with basename from WordPress config
- Pass basePath and useBrowserRouter to frontend
- Conditional router based on setting

Phase 3: Hash Route Migration
- Update EmailManager.php reset password URL
- Update EmailRenderer.php login URL
- Update TemplateOverride.php WC redirects
- All routes now use path format by default

This enables proper SEO indexing as search engines
can now crawl individual product/page URLs.
This commit is contained in:
Dwindi Ramadhana
2026-01-03 20:01:32 +07:00
parent 0421e5010f
commit 45fcbf9d29
5 changed files with 118 additions and 13 deletions

View File

@@ -1,5 +1,5 @@
import React from 'react';
import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
import { HashRouter, BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Toaster } from 'sonner';
@@ -102,6 +102,26 @@ function AppRoutes() {
);
}
// Get router config from WordPress
const getRouterConfig = () => {
const config = (window as any).woonoowCustomer;
return {
useBrowserRouter: config?.useBrowserRouter ?? true,
basePath: config?.basePath || '/store',
};
};
// Router wrapper that conditionally uses BrowserRouter or HashRouter
function RouterProvider({ children }: { children: React.ReactNode }) {
const { useBrowserRouter, basePath } = getRouterConfig();
if (useBrowserRouter) {
return <BrowserRouter basename={basePath}>{children}</BrowserRouter>;
}
return <HashRouter>{children}</HashRouter>;
}
function App() {
const themeConfig = getThemeConfig();
const appearanceSettings = getAppearanceSettings();
@@ -110,9 +130,9 @@ function App() {
return (
<QueryClientProvider client={queryClient}>
<ThemeProvider config={themeConfig}>
<HashRouter>
<RouterProvider>
<AppRoutes />
</HashRouter>
</RouterProvider>
{/* Toast notifications - position from settings */}
<Toaster position={toastPosition} richColors />