Блог

Я использую машинопись, компонент стиля, react-router-dom V6 (win10, VSCode)
, я сделал динамический рендеринг страниц с помощью параметров использования.
Приложение.tsx

 lt;Routesgt;  lt;Route path="/" element={token ? lt;Home /gt; : lt;Login /gt;} /gt;  lt;Route path="/register" element={lt;Register /gt;} /gt;  lt;Route  path="/:page"  element={  lt;PrivateRoutergt;  lt;PageRender /gt;  lt;/PrivateRoutergt;  }  /gt;  lt;Route  path="/:page/:id"  element={  lt;PrivateRoutergt;  lt;PageRender /gt;  lt;/PrivateRoutergt;  }  /gt; lt;/Routesgt;  

PageRender.tsx

 const PageRender = () =gt; {  const { page, id } = useParams();  const { token } = useAppSelector(selectAuth);   let pageName = '';  if (token) {  if (id) {  pageName = `${page}/[id]`;  } else {  pageName = `${page}`;  }  }   return generatePage(pageName); };  const generatePage = (pageName: string): any =gt; {  const component = () =gt; require(`../pages/${pageName}`).default;   try {  return React.createElement(component());  } catch (err) {  return lt;NotFound /gt;;  } };  export default PageRender;  

PrivateRouter.tsx

 import { Navigate } from 'react-router-dom';  interface IProps {  children: JSX.Element; }  const PrivateRouter = ({ children }: IProps) =gt; {  const firstLogin = localStorage.getItem('firstLogin');  return firstLogin ? children : lt;Navigate to="/" /gt;; };  export default PrivateRouter;  

The problem occurs when Info.tsx component is inserted into [id].tsx.
For Info Components, styled-Components and react-hook are used.

[id].tsx

 function Profile() {   return (  lt;gt;  lt;Info /gt;   lt;/gt;  ); }  export default Profile;  

Появятся следующие предупреждения.

Компонент в стиле.div с идентификатором «sc-iNGGcK» был создан динамически.

Предупреждение: React обнаружил изменение порядка крючков, вызываемых PageRender.

Как я могу решить эту проблему с предупреждением? Заранее благодарю вас за совет.