Как переключатся между компонентами в React?

В React есть несколько способов переключаться между компонентами. Вот некоторые из них:

1. Использование условных операторов:
Можно использовать условные операторы, такие как if или switch, чтобы обернуть компоненты в блоки условной отрисовки. Например:

function AppComponent() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      {isVisible ? <ComponentA /> : <ComponentB />}
      <button onClick={() => setIsVisible(!isVisible)}>Переключить</button>
    </div>
  );
}

2. Использование состояния:
Можно использовать состояние для хранения информации о текущем активном компоненте и затем отрисовывать соответствующий компонент на основе этого состояния. Например:

function AppComponent() {
  const [activeComponent, setActiveComponent] = useState("ComponentA");

  const renderComponent = () => {
    switch (activeComponent) {
      case "ComponentA":
        return <ComponentA />;
      case "ComponentB":
        return <ComponentB />;
      default:
        return null;
    }
  };

  return (
    <div>
      {renderComponent()}
      <button onClick={() => setActiveComponent("ComponentB")}>
        Переключить на ComponentB
      </button>
    </div>
  );
}

3. Использование React Router:
React Router - это библиотека, которая предоставляет компоненты для управления маршрутизацией в React. С помощью React Router можно переключаться между различными компонентами на основе определенного пути URL. Например:

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function AppComponent() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={ComponentA} />
          <Route exact path="/componentB" component={ComponentB} />
        </Switch>
        <button to="/componentB">Переключить на ComponentB</button>
      </div>
    </Router>
  );
}

Все эти способы имеют свои особенности и могут быть использованы в различных сценариях в зависимости от требований вашего проекта. Выбор определенного способа будет зависеть от контекста и функциональности, которую вы хотите реализовать в своем приложении.