1

Уважаемые разработчики. У меня появилась проблема при типизации элементарного кода. А точнее, неполадка связана с фрагментом кода где я решил "промапить"(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: Делал абсолютно всё то же самое только без типизации и всё получилось.

1 ответ 1

1

Итак, всё дело было в этой строчке - element={Rout.element} файла AppRouter.tsx. Нужно было писать не element={Rout.element}, а element={<Rout.element/>}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.