React 布局 VS 路由器

Question

我对在React中显示或路由组件有疑问。我设置了一个主页布局，其中包含标题、左侧菜单和内容部分。我们的想法是拥有一个页面，您只需更改主要内容部分。我想知道这是否是一个好方法，以及我是否必须使用路由器或仅使用钩子来执行此操作。在我所做的中，我只是使用useState挂钩来设置要显示的组件，并且不需要路由器，但我想知道这是否是正确的方法。在菜单上单击：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';

...