Я пытаюсь обработать свой код с помощью React Route на карте и защищенной функции;
Это массив для компонентов;
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;
Но это показать это сообщение;
«Ошибка: недопустимый тип элемента: ожидалась строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получено: undefined. Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутали дефолтный и именованный импорт.
Проверьте метод рендеринга Router.Consumer
».
Вы возвращаете undefined или, скорее, ничего не возвращаете в методе RoutesRender
, а реакция требует, чтобы вы возвращались в 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} />} />;
}
};
если я поставлю Route внутри карты, это сработает, но если я поставлю функцию, она не будет работать
{RoutesMaster.map((Routes, Index) => ( <Точный ключ маршрута = {Index} path = {Routes.Path} render = {(props) => <Routes.Component {...props} />} / > ))}
это работа, но мне нужно добавить ее в функцию
Я не могу соединить точки таким образом. Можете ли вы добавить полный код, который работает, пожалуйста?
Спасибо. Так в этом репо есть код, который не работает? Вы упомянули, что нашли способ заставить его работать. Можете ли вы добавить этот код сюда, в репозиторий commet или обновить?
Я попробую что-нибудь еще и вернусь к вам
@RamyMohamed отредактировал мой ответ. Значит, вы неправильно восприняли реквизит. Таким образом, первое свойство является основным и содержит все свойства для этого компонента. Поэтому я уничтожил все свойства этого объекта. Теперь он не показывает никаких ошибок
Спасибо за ваше время, я пытаюсь сделать так, чтобы цикл не работал, просто покажите первый объект из массива
Я сделал для вас codeandbox: codeandbox.io/s/bitter-sun-0ewy8?file=/src/App.js:1123-1128
Откройте консоль, и вы увидите, что ошибки, о которой вы говорили, нет. Это была ваша изначальная проблема. Я сделал пример только с кодом, который вы представили. Вы можете добавить этот код в свой проект и продолжить в своем коде, чтобы увидеть полный эффект.
Спасибо за ваше время и вашу помощь
Можете ли вы отредактировать свой вопрос и добавить код для других компонентов. Возможно, вы не возвращаете содержимое компонента