bugfix> reactjs > 投稿

次のバージョンでreactjsダッシュボードアプリを作成しました "react-router": "^ 6.0.0-beta.0"、 "react-router-dom": "^ 6.0.0-beta.0"

アプリの保護されたルーティングインスタンスを実装する必要があります。上記のreactrouter v6の時点では、保護されたルーティングはv5で使用していたものとは少し異なります。誰かがこれに保護されたルーティングを追加する方法を教えてもらえますか?お時間をいただきありがとうございます!

これがapp.jsです

import 'react-perfect-scrollbar/dist/css/styles.css';
import React from 'react';
import { useRoutes } from 'react-router-dom';
import { ThemeProvider } from '@material-ui/core';
import GlobalStyles from 'src/components/GlobalStyles';
import 'src/mixins/chartjs';
import theme from 'src/theme';
import routes from 'src/routes';
const App = () => {
const routing = useRoutes(routes);
return (
<ThemeProvider theme={theme}>
  <GlobalStyles />
  {routing}
</ThemeProvider>
);
};
 export default App;

これがroute.jsコードです

const routes = [
{
path: 'app',
element: <DashboardLayout />,
children: [
  { path: 'account', element: <AccountView /> },
  { path: 'reporting', element: <CustomerListView /> },
  { path: 'dashboard', element: <DashboardView /> },
  { path: 'classrooms', element: <ProductListView /> },
  { path: 'settings', element: <SettingsView /> },
  { path: '*', element: <Navigate to="/404" /> }
]
},
{
path: '/',
element: <MainLayout />,
children: [
  { path: 'login', element: <LoginView /> },
  { path: 'register', element: <RegisterView /> },
  {
    path: 'RegisterViewContactDetails',
    element: <RegisterViewContactDetails />
  },
  { path: 'ForgotPassword', element: <ForgotPassword /> },
  { path: 'RestPassword', element: <RestPassword /> },
  { path: '404', element: <NotFoundView /> },
  { path: '/', element: <Navigate to="/login" /> },
  { path: '*', element: <Navigate to="/404" /> }
]
}
];
 export default routes;

回答 1 件
  • これは、を使用して保護されたルートを実装するための私の実際の例ですuseRoutes針。

    App.js

    import routes from './routes';
    import { useRoutes } from 'react-router-dom';
    function App() {
      const { isLoggedIn } = useSelector((state) => state.auth);
      const routing = useRoutes(routes(isLoggedIn));
      return (
        <>
          {routing}
        </>
      );
    }
    
    

    ルート.js

    import { Navigate,Outlet } from 'react-router-dom';
        const routes = (isLoggedIn) => [
          {
            path: '/app', // protected routes
            element: isLoggedIn ? <DashboardLayout /> : <Navigate to="/login" />,
            children: [
              { path: '/dashboard', element: <Dashboard /> },
              { path: '/account', element: <Account /> },
              { path: '/', element: <Navigate to="/app/dashboard" /> },
              {
                path: 'member',
                element: <Outlet />,
                children: [
                  { path: '/', element: <MemberGrid /> },
                  { path: '/add', element: <AddMember /> },
                ],
              },
            ],
          },
          { // public routes
            path: '/',
            element: !isLoggedIn ? <MainLayout /> : <Navigate to="/app/dashboard" />,
            children: [
              { path: 'login', element: <Login /> },
              { path: '/', element: <Navigate to="/login" /> },
            ],
          },
        ];
        
        export default routes;
    
    

あなたの答え