使用React Router V6实施受保护的路由

用户名

已创建具有以下版本“ react-router”的react js仪表板应用程序:“ ^ 6.0.0-beta.0”,“ react-router-dom”:“ ^ 6.0.0-beta.0”

必须为该应用实现一个受保护的路由实例,从上述反应路由器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;
Vignesh

这是我使用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}
    </>
  );
}

routes.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;

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Firebase身份验证刷新受保护的路由React Router

在React Router v6中,如何在离开页面/路由之前检查表单是否脏

如何在react-router-dom v6中返回上一条路由

如何使用 TypeScript 和 React-Router 4、5 或 6 重写受保护/私有路由?

React-Router (experimental v6) 渲染问题?

如何在 React Router v6 中重定向?

如何導航到 React Router Dom V6 中的嵌套路由

React Router v6 `useRouter` Hook with `basename` 和 Redirection

React router v6 嵌套路由不顯示子元素

React Router v6 onclick

使用 react router dom v6 保護路由渲染沒有返回任何內容

react-router-dom V6 中的嵌套路由

在 React js react-router-dom V6 中實現嵌套路由

React Router Dom v6 中的重定向

在 React Router v6 中嵌套路由時將道具傳遞給 <Outlet />?

在 react-router v6 的 mapStateToProps 中使用 urlParams

如何在 React Router v6 中的嵌套父路由上設置索引路由

使用 react.js 和 react router v6 根据当前 URL 执行条件

React Router V6 activeStyle 问题

嵌套路由 react-router-dom v6 不起作用

React Router v6 嵌套路由不起作用

React Router v6 - 如何在路由中使用@符号?

react-router v6 双渲染组件

嵌套路由在 React Router v6 中不起作用

为什么我的使用 AWS Amplify 的 React Authentication 组件在使用 React Router V6 保护路由时被无限渲染

React-router-dom V6 没有正确更改路由(刷新 - 需要 f5 页面)

React Router Dom V6 嵌套路由属性

React/Typescript 条件路由 - 从 React Router Dom v5 更新到 v6

React router v6 在路由上遇到空白页