React 布局 VS 路由器-PHP中文网问答

我对在 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

使用本地状态

使用本地状态似乎没问题，但我会警告你，在状态中存储 JSX、存储一些数据（例如对组件的引用）并映射它被认为是 React 反模式声明你想要渲染的 JSX。

示例：

使用路线

如果您想使用 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>