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

Question

我在我的应用程序中有条件路由，当我重新加载一个页面时，它会导航到我设置的导航地址(‘/ '，我的主页)，.the条件路由运行良好，但是我希望当我重新加载页面时(例如:我在"YourChildren“页面)，我想留在这个页面上(我指的是"YourChildren ")，不要导航到另一个页面(在重新加载浏览器之后，它将导航到我的主页)。我有三个userType有不同的页面，我给它从我的contex。这是我的密码：

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

问题

问题是这些路由根据不正确的初始状态值进行重定向决策。

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

...

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

如果当前路径为"/Dashboard/YourChildren"并重新加载页面，则在应用程序挂载时的初始呈现周期中，Company状态值为false，并呈现到"/"的重定向。useEffect钩子直到初始呈现周期结束时才运行，以将状态设置为正确的值。

解决方案

根据UserType状态提供精确的初始值。

示例：

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

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