当页面重新加载反应路由器导航到第一页 v6

Question

我的应用程序中有条件路由，当我重新加载页面时，它会导航到我设置的导航地址（'/'，我的主页）。条件路由运行良好，但我希望何时重新加载页面（例如：我在“YourChildren”页面），我想留在这个页面（我的意思是“YourChildren”）并且不导航到另一个页面（重新加载浏览器后，它导航到我的主页）。 我有三个用户类型，它们有不同的页面，我从我的上下文中给它。 这是我的代码：

import React, { useEffect, useState } from 'react';
import { BrowserRouter, Routes, Route, Navigate, useLocation } from 'react-router-dom';
import ScrollToTop from './ScrollToTop';
const Dashboard = () => {
  const { activeMenu, themeSettings, setThemeSettings, currentColor, currentMode, UserType } = useStateContext();
  const [Company, setCompany] = useState(false)
  const [Doctor, setDoctor] = useState(false)
  const [Child, setChild] = useState(false)
  useEffect(() => {
    switch (UserType) {
      case "company":
        setCompany(true)
        break;
      case "Doctor":
        setDoctor(true)
        break;
      case "children":
        setChild(true)
        break;

      default:
        error("Type Not Recognized: " + UserType)
        break;
    }
  }, [UserType])
  
  return (
    <div className={currentMode === 'Dark' ? 'dark' : ''}>
      <BrowserRouter>
                      <ScrollToTop>

              <Routes basename="/Dashboard">

                {/*  Dashboard */}

                <Route path="" element={<Ecommerce />} />
                <Route path="/Dashboard/ecommerce" element={<Ecommerce />} />

                {/* Pages */}

                <Route path="/Dashboard/orders" element={<Orders />} />
                <Route path="/Dashboard/employees" element={<Employees />} />
                <Route path="/Dashboard/customers" element={<Customers />} />
                {/* <Route path="/Dashboard/customers" element={<CustomersFu />} /> */}

                {/* Apps */}

                <Route path="/Dashboard/kanban" element={<Kanban />} />
                <Route path="/Dashboard/editor" element={<Editor />} />
                <Route path="/Dashboard/color-picker" element={<ColorPicker />} />

                {/* Charts */}
                <Route path="/line" element={<Line />} />
                <Route path="/area" element={<Area />} />
                <Route path="/bar" element={<Bar />} />
                <Route path="/pie" element={<Pie />} />
                <Route path="/financial" element={<Financial />} />
                <Route path="/color-mapping"
                  element={<ColorMapping />} />
                <Route path="/pyramid" element={<Pyramid />} />
                <Route path="/stacked" element={<Stacked />} />
                {/*child  other Pages */}
                <Route path="/Dashboard/:id/child" element={Child ? <ChildFile /> : <Navigate replace to={"/"} />} />
                <Route path="/Dashboard/:id/Doctor" element={Child ? <UserAboutPage /> : <Navigate replace to={"/"} />} />
                <Route path="/Dashboard/:id/Advisor" element={Child ? <UserAboutPage /> : <Navigate replace to={"/"} />} />
                <Route path="/Dashboard/DoctorList" element={Child ? <DoctorList /> : <Navigate replace to={"/"} />} />
                <Route path="/Dashboard/paintList" element={Child ? <PaintList /> : <Navigate replace to={"/"} />} />
                <Route path="/Dashboard/ListOfAppointments" element={Child ? <ListOfAppointment /> : <Navigate replace to={"/"} />} />
                <Route path="/Dashboard/paintList/:id/Details" element={Child ? <PaintDetails /> : <Navigate replace to={"/"} />} />
                {/* Apps in doctor*/}
                <Route path="/Dashboard/Calendar" element={Doctor ? <IndexCalendar /> : <Navigate replace to={"/"} />} />
                {/* pages in doctor*/}
                <Route path="/Dashboard/Referees" element={Doctor ? <Referees /> : <Navigate replace to={"/"} />} />
                <Route path="/Dashboard/Credits" element={Doctor || Company ? <Credits /> : <Navigate replace to={"/"} />} />
                <Route path="/Dashboard/CompleteProfil" element={Doctor ? <CompleteProfile /> : <Navigate replace to={"/"} />} />
                <Route path="/Dashboard/CommentManager" element={Doctor || Company ? <CommentManager /> : <Navigate replace to={"/"} />} />
                <Route path="/Dashboard/VisitList" element={Doctor ? <VisitsRequest /> : <Navigate replace to={"/"} />} />
                {/* pages in company*/}
                <Route path="/Dashboard/YourChildren" element={Company ? <YourChildren /> : <Navigate replace to={"/"} />} />
                <Route path="/Dashboard/YourAdviser" element={Company ? <YourDoctors /> : <Navigate replace to={"/"} />} />
                <Route path="/Dashboard/YourChildren/:id/GetCard" element={Company ? <ChildrenCard /> : <Navigate replace to={"/"} />} />
                <Route path="/Dashboard/YourChildren/:id/Details" element={Company ? <ChildFile /> : <Navigate replace to={"/"} />} />


              </Routes>
              </ScrollToTop>

      </BrowserRouter>
    </div>
  )
}

export default Dashboard;

Answer 1

问题

问题是路由根据不正确的初始 state 值做出重定向决策。

const [Company, setCompany] = useState(false); // <-- initially false

...

<Route
  path="/Dashboard/YourChildren"
  element={Company // <-- initially false
    ? <YourChildren />
    : <Navigate replace to="/" /> // <-- render redirect
  }
/>

如果当前路径是"/Dashboard/YourChildren"并且页面被重新加载，那么在应用程序挂载时的初始渲染周期中， Company state 值为false ，并呈现到"/"的重定向。 useEffect挂钩在初始渲染周期结束之前不会运行，以将 state 设置为正确的值。

解决方案

根据UserType state 提供准确的初始 state 值。

例子：

const { ..., UserType } = useStateContext();

const [Company, setCompany] = useState(UserType === "company");
const [Doctor, setDoctor] = useState(UserType === "Doctor");
const [Child, setChild] = useState(UserType === "children");