React 18: React Router V6 on route change rerenders complete react app on safari答案

【问题标题】：React 18: React Router V6 on route change rerenders complete react app on safariReact 18: React Router V6 on route change rerenders complete react app on safari
【发布时间】：2022-08-08 23:04:20
【问题描述】：

我有一个 React 应用程序，今天将其更新为 React 18 和 ReactRouter v6。在 Chrome 上一切正常。但是在 Safari 上，每次我将 Route 更改为另一个时，都会重新渲染完整的 React App。控制台已完全清除，我看到了加载屏幕，通常在构建 react 应用程序时显示。

我的 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>
    );
}

和我的 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();

希望您了解我的问题并可以帮助我。

什么是载入画面？你是如何改变路线的？你是当然这仅在 Safari 中重现？你能创建一个跑步重现此问题的代码沙盒演示，我们可以现场检查和调试？请包括您的精确的重现问题的步骤。
@DrewReese - 我的加载屏幕只是一个带有动画 div 的图像，它正在转动。它位于 \"root\" div 中，因此当加载 react 应用程序时，它不在 DOM 三中。到目前为止，我只是在 safari 中看到了问题。我正在通过 useNavigate() 更改路线，该路线通过单击侧边栏上的按钮来切换。

标签： reactjs typescript safari react-router-dom

【解决方案1】：

我猜你忘记了'react-router-dom'中的BrowserRouter。

在basic concepts 中，它说它的组件“创建历史记录，将初始位置置于状态，并订阅 URL。”

应用于您的代码：

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>
);

【讨论】：

好主意，但 BrowserRouter 在 Providers 组件内。我在我的代码示例中忘记了它
如果路由器丢失了吨不变的违规和警告/错误。 OP 肯定会在其他浏览器中注意到这些。
真的。我的错。 ^^ |顺便说一句'！在'getElementById（“根”）！）； ' 是一个错字，不是吗？但我不知道它是否会导致这样的事情。

【解决方案2】：

如果已启用，请尝试在您的应用中删除 strict mode。

使用 React 18 中的严格模式，React 将在开发模式下模拟卸载和重新安装组件。

【讨论】：

“严格模式”不是我所知道的配置，它是一个组件，React.StrictMode。 OP 似乎也没有在其 index.ts 文件中使用 StrictMode 组件。