React 佈局 VS 路由器

Question

我對在React中顯示或路由組件有疑問。我設定了一個主頁佈局，其中包含標題、左側選單和內容部分。我們的想法是擁有一個頁面，您只需更改主要內容部分。我想知道這是否是一個好方法，以及我是否必須使用路由器或僅使用鉤子來執行此操作。在我所做的中，我只是使用useState掛鉤來設定要顯示的元件，並且不需要路由器，但我想知道這是否是正確的方法。在選單上點選：setContent(<QueryIndi​​c

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

...