Уважаемые разработчики. У меня появилась проблема при типизации элементарного кода. А точнее, неполадка связана с фрагментом кода где я решил "промапить"(map()
) роутеры(<Route>
) чтобы разделить их на privatePages
и publicPages
. Сейчас всё поймёте)
-----> Вот файл routerIndex.ts
В нём я задал в разных массивах элементы для роутеров(чтобы потом их проматить). Один массив для авторизованных пользователей(private), а другой для новых(public). И соответственно задал для элементов массива типы.
import React from "react";
import Login from "../pages/Login";
import Event from '../pages/Event';
export interface IRoute {
path: string;
element: React.ComponentType;
exact?: boolean;
}
export const publicRoutes: IRoute[] = [
{path: '/', element: Login},
{path: '*', element: Login}
]
export const privateRoutes: IRoute[] = [
{path: '/home', element: Event},
{path: '*', element: Event}
]
Меня смущает вот эта строчка - element: React.ComponentType;
-----> Вот файл AppRouter.tsx
В нём я после элементарной проверки маплю(.map()
) массив(из файла routerIndex.ts) для того чтобы открыть пользователю или private Route или public Route.
import React, { useState } from "react";
import { Route, Routes } from "react-router-dom";
import { publicRoutes, privateRoutes } from "../router/routerIndex";
const AppRouter = () => {
const [checkRout, setCheckRout] = useState(true)
return(
checkRout == true ?
<Routes>
{privateRoutes.map(Rout =>
<Route
path={Rout.path}
element={Rout.element}
key={Rout.path}
/>
)}
</Routes>
:
<Routes>
{publicRoutes.map(Rout =>
<Route
path={Rout.path}
element={Rout.element}
key={Rout.path}
/>
)}
</Routes>
);
};
export default AppRouter;
-----> Вот почти пустой компонент Login
(компонент Event
такой же)
import React, { FC } from "react"
const Login: FC = () => {
return(
<div>
Login
</div>
)
}
export default Login;
-----> Вот основной файл - App.tsx
import React, { FC } from "react";
import "./style/App.css";
import AppRouter from "./components/AppRouter";
import { BrowserRouter as Router } from "react-router-dom";
const App: FC = () => {
return (
<Router>
<div>
<AppRouter/>
</div>
</Router>
);
};
export default App;
-----> Ну и index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./style/index.css";
ReactDOM.render(
<App/>,
document.getElementById("root")
);
Собственно вопрос вот в чём. Вот этот код мне выдает такую ошибку:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component/>
from render. Or maybe you meant to call this function rather than return it.
И я не особо понимаю как её исправить.
Но есть один момент:
Если я в этом коде исправлю вот здесь на Event, тогда всё будет работать(но соответственно только для компонента Event
)
import React, { useState } from "react";
import { Route, Routes } from "react-router-dom";
import { publicRoutes, privateRoutes } from "../router/routerIndex";
import Login from "../pages/Login";
const AppRouter = () => {
const [checkRout, setCheckRout] = useState(true)
return(
checkRout == true ?
<Routes>
{privateRoutes.map(Rout =>
<Route
path={Rout.path}
==========> element={<Event/>} <============
key={Rout.path}
/>
)}
</Routes>
:
<Routes>
{publicRoutes.map(Rout =>
<Route
path={Rout.path}
element={Rout.element}
key={Rout.path}
/>
)}
</Routes>
);
};
export default AppRouter;
Я так подразумеваю что проблема в типизации или что-то подобное. Короче хз)
В любом случае буду очень благодарен за любую помощь.
PS: Делал абсолютно всё то же самое только без типизации и всё получилось.