React Layout VS Routeur

Question

J'ai une question sur l'affichage ou le routage des composants dans React. J'ai mis en place une mise en page de page d'accueil avec un en-tête, un menu de gauche et des sections de contenu. L'idée est d'avoir une page où il vous suffit de modifier la section de contenu principale. Je me demande si c'est une bonne approche et si je dois utiliser un routeur ou simplement un crochet pour ce faire. Dans ce que je fais, j'utilise simplement un hook useState pour définir le composant à afficher, et aucun routeur n'est nécessaire, mais je me demande si c'est la bonne approche. Cliquez sur le menu : setContent(<QueryIndic

P粉627136450 · Answer

La manière dont vous souhaitez appliquer une logique conditionnelle pour afficher/rendre le contenu en fonction de l'interaction de l'utilisateur est subjective, mais vous avez le choix.

Utiliser l'état local

Utiliser l'état local semble bien, mais je vous préviens, stocker JSX dans l'état, stocker certaines données (comme une référence à un composant) et le mapper est considéré comme un anti-modèle React pour déclarer le JSX que vous souhaitez restituer.

Exemple :

const QUERY_CONTENT = {
  QueryExecutor,
  QueryIndicators,
}

const Login = () => {
  const REACT_VERSION = React.version;

  const [collapsed, setCollapsed] = useState(true);
  const [QueryContent, setQueryContent] = useState(QUERY_CONTENT.QueryIndicators);

  return (
    
       setCollapsed(value)}
      >
        
          }
            onClick={() => setQueryContent(QUERY_CONTENT.QueryIndicators)}
          >
            Home
          
          }
            onClick={() => setQueryContent(QUERY_CONTENT.QueryExecutor)}
          >
            Executor
                    
        
      

      
        
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: 'trigger',
              onClick: () => setCollapsed(collapsed => !collapsed)
            }
          )}
          
            POA Console HOME
          
        
        
          
        
      
    
  );
};

Utiliser les directions

Si vous souhaitez utiliser le composant react-router 和路由来管理内容的条件渲染，则将该组件转换为一个布局组件，该布局组件为嵌套渲染一个 Outlet pour restituer l'itinéraire. Le routeur/routeur gérera la correspondance des itinéraires et restituera le contenu de l'itinéraire spécifique.

Exemple :

import { Outlet, useNavigate } from 'react-router-dom';

const REACT_VERSION = React.version;

const AppLayout = () => {
  const navigate = useNavigate();

  const [collapsed, setCollapsed] = useState(true);

  return (
    
      
        
          }
            onClick={() => navigate("/queryIndicators")}
          >
            Home
          
          }
            onClick={() => navigate("/queryExecutor")}
          >
            Executor
                    
        
      

      
        
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: 'trigger',
              onClick: () => setCollapsed(collapsed => !collapsed)
            }
          )}
          
            POA Console HOME
          
        
        
           // <-- nested routes render here
        
      
    
  );
}

import { Routes, Route } from 'react-router-dom';

const App = () => {
  ...

  return (
    ...
    
      ...
      }>
        ...
        } />
        } />
        ...
      
      ...
    
    ...
  );
};

import { BrowserRouter as Router } from 'react-router-dom';

...