React Layout VS Routeur

Question

J'ai une question sur l'affichage ou le routage des composants dans React. J'ai créé une section page d'accueil 布局，其中包含标题、左侧菜单和内容. 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 j'ai fait, j'ai simplement utilisé le crochet useState pour définir le composant à afficher et aucun routeur n'était nécessaire, mais je me demande si c'est la bonne voie à suivre.

• Cliquez sur le menu :

  setContent(<QueryIndicators />)

• J'ai une section Content qui montre le composant actuel :

  {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

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

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 (
    <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>