React 佈局 VS 路由器

Question

我對在 React 中顯示或路由元件有疑問。 我設定了一個主頁佈局，其中包含標題、左側選單和內容部分。我們的想法是擁有一個頁面，您只需更改主要內容部分。 我想知道這是否是一個好方法，以及我是否必須使用路由器或僅使用鉤子來執行此操作。

在我所做的中，我只是使用 useState 掛鉤來設定要顯示的元件，並且不需要路由器，但我想知道這是否是正確的方法。

• 在選單上點選：

  setContent(<QueryIndicators />)

• 我有一個顯示目前元件的 Content 部分：

  {content}

  const Login = () => {
    const REACT_VERSION = React.version
  
    const [collapsed, setCollapsed] = useState(true)
    const [content, setContent] = useState(<QueryIndicators />)
  
    return (
      <Layout className="layout">
        <Sider
          className="layout__sider"
          collapsible
          collapsed={collapsed}
          onCollapse={value => setCollapsed(value)}
        >
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            className="layout__sider-menu"
          >
            <Menu.Item
              key="1"
              icon={<HomeTwoTone twoToneColor={'#184287'} />}
              onClick={() => setContent(<QueryIndicators />)}
            >
              Home
            </Menu.Item>
            <Menu.Item
              key="2"
              icon={<PlayCircleOutlined />}
              onClick={() => setContent(<QueryExecutor />)}
            >
              Executor
            </Menu.Item >          
          </Menu>
        </Sider>
  
        <Layout>
          <Header className="layout__header">
            {React.createElement(
              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: 'trigger',
                onClick: () => setCollapsed(!collapsed)
              }
            )}
            <h1
              className="layout__header-text"
              title={'React:' + REACT_VERSION}
            >
              POA Console HOME
            </h1>
          </Header>
          <Content className="layout__content">{content}</Content>
        </Layout>
      </Layout>
    )
  }
  
  export default Login

Answer 1

您想要如何應用條件邏輯來基於使用者互動顯示/渲染內容是主觀的，但您有多種選擇。

使用本機狀態

使用本地狀態似乎沒問題，但我會警告你，在狀態中儲存 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 (
    <Layout className="layout">
      <Sider
        className="layout__sider"
        collapsible
        collapsed={collapsed}
        onCollapse={value => setCollapsed(value)}
      >
        <Menu
          mode="inline"
          defaultSelectedKeys={['1']}
          className="layout__sider-menu"
        >
          <Menu.Item
            key="1"
            icon={<HomeTwoTone twoToneColor={'#184287'} />}
            onClick={() => setQueryContent(QUERY_CONTENT.QueryIndicators)}
          >
            Home
          </Menu.Item>
          <Menu.Item
            key="2"
            icon={<PlayCircleOutlined />}
            onClick={() => setQueryContent(QUERY_CONTENT.QueryExecutor)}
          >
            Executor
          </Menu.Item >          
        </Menu>
      </Sider>

      <Layout>
        <Header className="layout__header">
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: 'trigger',
              onClick: () => setCollapsed(collapsed => !collapsed)
            }
          )}
          <h1
            className="layout__header-text"
            title={'React:' + REACT_VERSION}
          >
            POA Console HOME
          </h1>
        </Header>
        <Content className="layout__content">
          <QueryContent />
        </Content>
      </Layout>
    </Layout>
  );
};

使用路線

如果您想使用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 (
    <Layout className="layout">
      <Sider
        className="layout__sider"
        collapsible
        collapsed={collapsed}
        onCollapse={setCollapsed}
      >
        <Menu
          mode="inline"
          defaultSelectedKeys={['1']}
          className="layout__sider-menu"
        >
          <Menu.Item
            key="1"
            icon={<HomeTwoTone twoToneColor={'#184287'} />}
            onClick={() => navigate("/queryIndicators")}
          >
            Home
          </Menu.Item>
          <Menu.Item
            key="2"
            icon={<PlayCircleOutlined />}
            onClick={() => navigate("/queryExecutor")}
          >
            Executor
          </Menu.Item >          
        </Menu>
      </Sider>

      <Layout>
        <Header className="layout__header">
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: 'trigger',
              onClick: () => setCollapsed(collapsed => !collapsed)
            }
          )}
          <h1
            className="layout__header-text"
            title={'React:' + REACT_VERSION}
          >
            POA Console HOME
          </h1>
        </Header>
        <Content className="layout__content">
          <Outlet /> // <-- nested routes render here
        </Content>
      </Layout>
    </Layout>
  );
}

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

const App = () => {
  ...

  return (
    ...
    <Routes>
      ...
      <Route element={<AppLayout />}>
        ...
        <Route path="/queryIndicators" element={<QueryIndicators />} />
        <Route path="/queryExecutor" element={<QueryExecutor />} />
        ...
      </Route>
      ...
    </Routes>
    ...
  );
};

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

...

<Router>
  <App />
</Router>