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>