时间戳

首页 > 解决方案 > 如何在 React Router 中使用受保护的功能映射路由？

reactjs - 如何在 React Router 中使用受保护的功能映射路由？

问题描述

我尝试在地图和受保护的函数中使用 React Route 处理我的代码；

This 组件的数组；

import LoginContainers from "../Containers/LoginContainers/LoginContainers";
import RegisterContainers from "../Containers/RegisterContainers/RegisterContainers";
import ChattingApp from "../Containers/ChattingApp/ChattingApp";

const RoutesMaster = [
    {
        Path: '/login',
        Component: LoginContainers,
        Title: 'Login',
        AuthRequired: false
    },{
        Path: '/register',
        Component: RegisterContainers,
        Title: 'Register',
        AuthRequired: true
    },{
        Path: '/',
        Component: ChattingApp,
        Title: 'Janus Chat',
        AuthRequired: true
    },
]

这是主要组件中的代码；

import React from 'react';
import {BrowserRouter, Switch, Route, useHistory} from "react-router-dom";
import RoutesMaster from "./RoutesMaster";

const RoutesRender = (Routes, Key) => {
    const History = useHistory();

    if (Routes.AuthRequired) {
        History.push("/auth/login");
    } else {
        return (
            <Route exact key={Key} path={Routes.Path} render={(props) => <Routes.Component {...props} />} />
        )
    }
}

const RoutesProvider = () => {
    return (
    <React.Fragment>
        <BrowserRouter>
            <Switch>
                {RoutesMaster.map((Routes, Index) => (
                    <RoutesRender Routes={Routes} Key={Index} />
                ))}
            </Switch>
        </BrowserRouter>
    </React.Fragment>
);
}

export default RoutesProvider;

但它显示了这条消息； “错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认和命名的导入。检查渲染方法Router.Consumer。”

标签： reactjsreact-routerreact-hooksreact-router-dom

解决方案

您正在返回 undefined，或者更确切地说，在 method 中没有返回任何内容RoutesRender，并且 react 要求您至少在 VDOM 中返回null。

这是您的代码，其中包含更改和注释以查看它的位置：

const RoutesRender = ({ Routes, Key}) => {
  const History = useHistory();

  if (Routes.AuthRequired) {
    History.push('/auth/login');
    return null; // This is return value that is needed
  } else {
    return <Route exact key={Key} path={Routes.Path} render={(props) => <Routes.Component {...props} />} />;
  }
};

推荐阅读