Блог

Итак, я настроил маршрутизацию приложения React с помощью маршрутизатора React v6 с вложенными маршрутами.

Проблема в том, что когда я получаю доступ к любому из моих частных маршрутов (определенных следующим образом) Я теряю состояние сеанса, теряю такую информацию, как параметры запроса и источник ссылки (предыдущий путь), и, похоже, не могу понять, как я могу передать это состояние своему частному компоненту маршрута дочерним маршрутам.

Это моя конфигурация маршрутизации:

App.js:

 import routes from './routes';

const App = () => {
    const routing = useRoutes(routes);

    return (
        <ThemeProvider theme={theme}>
            <UserProvider>
                    <GlobalStyles />
                    {routing}
            </UserProvider>
        </ThemeProvider>
    );
};
export default App;
 

Index.js:

 import App from './App';

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'));
 

Routes.js:

В console.log(местоположение) отображается пустое местоположение.состояние

 const Private = ({ component: Component, ...rest }) => {

  const [state] = React.useContext(UserContext);

  const location = useLocation()
  const path = location.pathname

  console.log(location)
  if (state.auth){
    console.log('Authenticated');
    return <Component {...rest} />
  }
    
  else {
    console.log('Not Authenticated')
    return <Navigate to = {'/login?from='   path} />
  }
  

};


const routes = [
  {
    path: 'app',
    element: <Private component={DashboardLayout} />,
    children: [
      {
        path: 'account', children: [
          { path: 'integrations', element: <Integrations /> },
        ]
      },
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'audiences', element: <Audiences /> },
      { path: 'creatives', element: <Creatives /> },
      { path: 'copywriting', element: <Copywriting /> },


      { path: 'settings', element: <ProjectSettings /> },
      { path: 'user_settings', element: <UserSettings /> },
      
      { path: 'fb_interests', element: <FbInterestsExplorer /> },
      { path: '*', element: <NotFound /> },
    ]
  },
  {
    path: '/',
    element: <MainLayout />,
    children: [
      { path: 'login', element: <Login /> },
      { path: 'user/activate/:user_id', element: <UserConfirmation /> },
      { path: '/', element: <Navigate to="/app/dashboard" /> },
      { path: '*', element: <NotFound /> }
    ]
  }
];

export default routes;
 

DashboardLayout.js

 const DashboardLayout = () => {
  const [isMobileNavOpen, setMobileNavOpen] = useState(false);

  return (
    <DashboardLayoutRoot>
      <DashboardNavbar onMobileNavOpen={() => setMobileNavOpen(true)} />
      <DashboardSidebar
        onMobileClose={() => setMobileNavOpen(false)}
        openMobile={isMobileNavOpen}
      />
      <DashboardLayoutWrapper>
        <DashboardLayoutContainer>
          <DashboardLayoutContent>
            <Outlet />
          </DashboardLayoutContent>
        </DashboardLayoutContainer>
      </DashboardLayoutWrapper>
    </DashboardLayoutRoot>
  );
};

export default DashboardLayout;
 

Попробуйте это, чтобы получить состояние в v6:

     const location = useLocation()
    console.log(location)
    const state = location.state
    console.log(state)
 

Это произошло со мной при распространении объекта внутри состояния истории.

 <MenuItem
  onClick={() => {
    history("/users/form", {
      state: { isNew: false, ...row },
    })
  }}
>
  Edit
</MenuItem>
 

Это устранило проблему

 <MenuItem
  onClick={() => {
    history("/users/form", {
      state: {
        isNew: false,
        type: row.type,
        email: row.email,
        kind: row.kind || "",
        role: row.role,
        permissions: row.permissions,
      },
    })
  }}
>
  Edit
</MenuItem>