when page reload react router navigate to first page v6

Masir 0
Viewed 38

i have conditional routing in my app and when i reload a page it's navigates to that navigates address i have set (' / ', my Home page) .the conditional routing is working well but i want when ,i reload the page( for example : i'm in "YourChildren" page ) ,I want to stay on this page( i mean "YourChildren ") and don't navigate to another page(after reloading browser ,it's navigates to my Home page ). i have three userType that have different pages that i give it from my contex. this is my codes :

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;
react-router reactjs
1 Answers

Issue

The issue is that the routes make redirecting decisions based on incorrect initial state values.

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

...

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

If the current path is "/Dashboard/YourChildren" and the page is reloaded, then on the initial render cycle when the app mounts the Company state value is false and the redirect to "/" is rendered. The useEffect hook doesn't run until the end of the initial render cycle to set the state to the correct value.

Solution

Provide accurate initial state values based on the UserType state.

Example:

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

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