React Layout VS Router

Question

I have a question about displaying or routing components in React. I set up a homepage layout with a header, left menu, and content sections. The idea is to have a page where you only need to change the main content section. I'm wondering if this is a good approach and if I have to use a router or just a hook to do this. In what I'm doing, I'm just using a useState hook to set the component to be displayed, and no router is needed, but I'm wondering if this is the right approach. Click on the menu: setContent(<QueryIndic

P粉627136450 · Answer

How you want to apply conditional logic to display/render content based on user interaction is subjective, but you have options.

Use local state

Using local state seems okay, but I will warn you, storing JSX in state, storing some data (such as a reference to a component) and mapping it is considered a React anti-pattern to declare the JSX you want to render.

Example:

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 (
    
       setCollapsed(value)}
      >
        
          }
            onClick={() => setQueryContent(QUERY_CONTENT.QueryIndicators)}
          >
            Home
          
          }
            onClick={() => setQueryContent(QUERY_CONTENT.QueryExecutor)}
          >
            Executor
                    
        
      

      
        
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: 'trigger',
              onClick: () => setCollapsed(collapsed => !collapsed)
            }
          )}
          
            POA Console HOME
          
        
        
          
        
      
    
  );
};

Use Route

If you want to use react-router and routing to manage conditional rendering of content, then convert the component into a layout component that renders an Outlet for the nested The route along which the component should be rendered. The router/router will manage route matching and render specific route content.

Example:

import { Outlet, useNavigate } from 'react-router-dom';

const REACT_VERSION = React.version;

const AppLayout = () => {
  const navigate = useNavigate();

  const [collapsed, setCollapsed] = useState(true);

  return (
    
      
        
          }
            onClick={() => navigate("/queryIndicators")}
          >
            Home
          
          }
            onClick={() => navigate("/queryExecutor")}
          >
            Executor
                    
        
      

      
        
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: 'trigger',
              onClick: () => setCollapsed(collapsed => !collapsed)
            }
          )}
          
            POA Console HOME
          
        
        
           // <-- nested routes render here
        
      
    
  );
}

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

const App = () => {
  ...

  return (
    ...
    
      ...
      }>
        ...
        } />
        } />
        ...
      
      ...
    
    ...
  );
};

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

...