Reagieren Sie auf Layout vs. Router

Question

Ich habe eine Frage zum Anzeigen oder Weiterleiten von Komponenten in React. Ich habe ein Homepage-Layout mit einer Kopfzeile, einem linken Menü und Inhaltsabschnitten eingerichtet. Die Idee besteht darin, eine Seite zu haben, auf der Sie nur den Hauptinhaltsbereich ändern müssen. Ich frage mich, ob das ein guter Ansatz ist und ob ich dafür einen Router oder nur einen Hook verwenden muss. Bei dem, was ich tue, verwende ich lediglich einen useState-Hook, um die anzuzeigende Komponente festzulegen, und es ist kein Router erforderlich, aber ich frage mich, ob dies der richtige Ansatz ist. Klicken Sie auf das Menü: setContent(<QueryIndic

P粉627136450 · Answer

您想要如何应用条件逻辑来基于用户交互显示/渲染内容是主观的，但您有多种选择。

使用本地状态

使用本地状态似乎没问题，但我会警告你，在状态中存储 JSX、存储一些数据（例如对组件的引用）并映射它被认为是 React 反模式声明你想要渲染的 JSX。

示例：

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
          
        
        
          
        
      
    
  );
};

使用路线

如果您想使用 react-router 和路由来管理内容的条件渲染，则将该组件转换为一个布局组件，该布局组件为嵌套渲染一个 Outlet 组件要渲染的路线。路由器/路由将管理路由匹配并渲染特定的路由内容。

示例：

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';

...