搜尋

首頁  >  問答  >  主體

React 佈局 VS 路由器

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

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

P粉387108772P粉387108772429 天前535

全部回覆(1)我來回復

  • P粉627136450

    P粉6271364502023-09-12 00:56:42

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

    使用本機狀態

    使用本地狀態似乎沒問題,但我會警告你,在狀態中儲存 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>

    回覆
    0
  • 取消回覆