在保持状态的同时切换React中的布局

function App() {
  const [isGrid, setIsGrid] = useState(true);

  return (
    <div>
      <button onClick={() => setIsGrid(!isGrid)}>切换布局</button>
      {isGrid ? <GridLayout /> : <ListLayout />}
    </div>
  );
}

function App() {
  return (
    <div>
      <Router>
        <Switch>
          <Route path="/grid" component={GridLayout} />
          <Route path="/list" component={ListLayout} />
        </Switch>
      </Router>
    </div>
  );
}

function App() {
  const [isGrid, setIsGrid] = useState(true);

  return (
    <div className={isGrid ? 'grid-layout' : 'list-layout'}>
      <button onClick={() => setIsGrid(!isGrid)}>切换布局</button>
      {/* 布局内容 */}
    </div>
  );
}