React 18: React Router V6 on route change rerenders complete react app on safari-CodePudding

I have a React App and updated it today to React 18 and ReactRouter v6. On Chrome everything is running fine. But on Safari every time I change a Route to another the complete React App rerender. The console is completely cleared and I see my loading screen, which normally shown when the react app is building.

My App.tsx:

import {
    Route,
    Routes,
    Navigate,
    useLocation,
} from "react-router-dom";
import Typography from '@mui/material/Typography';
import React from "react";
import { useApi } from "./api";
import SidebarLayout from "./components/SidebarLayout";
import LHome from "./pages/lazy/LHome";
import LService from "./pages/lazy/LService";
import LDashbord from "./pages/lazy/LDashbord";
import LMasterplan from "./pages/lazy/LMasterplan";
import LWeekPlanSchedule from "./pages/lazy/LWeekPlanSchedule";
import LEmployeeManager from "./pages/lazy/LEmployeeManager";
import LVacationManager from "./pages/lazy/LVacationManager";
import LLogin from "./pages/lazy/LLogin";
import LJumperDays from "./pages/lazy/LJumperDays";
import LUserVacation from "./pages/lazy/LUserVacation";
import LDebugTools from "./pages/lazy/LDebugTools";
import LAdminPanel from "./pages/lazy/LAdminPanel";
import LCarInterface from "./components/lazy/LCarInterface";
import LCarService from "./components/lazy/LCarService";
import LUserCreate from "./components/lazy/LUserCreate";
import LUserEdit from "./components/lazy/LUserEdit";
import LUserInterface from "./components/lazy/LUserInterface";
import LCarManager from "./pages/lazy/LCarManager";
import LCarCreate from "./components/lazy/LCarCreate";
import LCarEdit from "./components/lazy/LCarEdit";


const App = () => {
const api = useApi();
return (
        <SidebarLayout>
            <Routes>
                {api.isLoggedIn && (
                    <>
                        <Route path="/home" element={ <LHome
                                setNotificationsCount={
                                    setNotificationsCount
                                }
                                group={userGroup}
                            />}/>
                        <Route path="/admin" element={<LAdminPanel />}/>
                        <Route path="/debug" element={<LDebugTools />}/>
                        <Route path="/dashboard" element={<LDashbord />}/>
                        <Route path="/uservacation" element={<LUserVacation />}/>
                        <Route path="/vacationverwaltung" element={<LVacationManager />}/>
                        <Route path="/jumperDays" element={<LJumperDays />}/>
                        <Route path="/weekplan" element={<LWeekPlanSchedule />}/>
                        <Route path="/masterplan" element={<LMasterplan />}/>
                        <Route path="/employees" element={<LEmployeeManager />}/>
                        <Route path="/employees/create" element={<LUserCreate />}/>
                        <Route path="/employees/edit/:id" element={<LUserEdit />}/>
                        <Route path="/employees/show/:id" element={<LUserInterface />}/>
                        <Route path="/cars" element={<LCarManager />}/>
                        <Route path="/cars/create" element={<LCarCreate />}/>
                        <Route path="/cars/edit/:id" element={<LCarEdit />}/>
                        <Route path="/cars/show/:id" element={<LCarInterface />}/>
                        <Route path="/service" element={<LService />}/>
                        <Route path="/service/car/:id" element={<LCarService />}/>
                        <Route path="/lohnverwaltung" element={<Lohn />}/>
                        <Route path="/moneypost" element={<Typography
                                color={(theme) =>
                                    theme.palette.text.primary
                                }
                            >
                                In Entwicklung
                            </Typography>}/>
                        <Route path="/monitorplan" element={<MonitorPlan />}/>
                        {<Route path="*" element={<Navigate to={"/home"} />}/>}
                    </>
                )}
                <Route path="/login" element={<LLogin key="lp" />}/>
                {!api.isLoggedIn && <Route path="*" element={<Navigate to={"/login"} />}/>}
            </Routes>
        </SidebarLayout>
    );
}

and my index.ts:

import { createRoot } from "react-dom/client";
import "./index.css";
import Providers from "./Providers";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = createRoot(document.getElementById("root")!);
root.render(
    <Providers>
        <App />
    </Providers>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

Hope you understand my Problem and can help me.

CodePudding user response：

my guess is you forgot the BrowserRouter from 'react-router-dom'.

In the basic concepts it says its the component ' creates a history, puts the initial location in to state, and subscribes to the URL.'

Applied to your code:

import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import {BrowserRouter} from "react-router-dom";
const root = createRoot(document.getElementById("root")!);
root.render(
     <BrowserRouter>
        <App />
     </BrowserRouter>
);

CodePudding user response：

Try removing strict mode in your app, if it is enabled.

With Strict Mode in React 18, React will simulate unmounting and remounting the component in development mode.