Как сделать так чтобы при незаполненном инпуте пользователь переходил на другую страницу?

Для реализации перехода на другую страницу при незаполненном инпуте в React, вам потребуется использовать роутинг-библиотеку, такую как React Router.

Первым шагом будет установка React Router в ваш проект с помощью пакетного менеджера npm или yarn. Выполните следующую команду в терминале внутри директории вашего проекта:

npm install react-router-dom

или

yarn add react-router-dom

Когда установка будет завершена, вам нужно будет настроить компонент Router для определения маршрутов вашего приложения. В основном файле вашего приложения (обычно index.js или App.js) импортируйте компоненты BrowserRouter и Route из react-router-dom:

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

Затем окружите ваше приложение компонентом BrowserRouter и определите маршруты с помощью компонента Route:

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import HomePage from './HomePage';
import OtherPage from './OtherPage';

function App() {
  return (
    <BrowserRouter>
      <Route path="/" exact component={HomePage} />
      <Route path="/other" component={OtherPage} />
    </BrowserRouter>
  );
}

export default App;

В приведенном выше примере, если пользователь находится на домашней странице ("/"), будет отображен компонент HomePage.

Затем вам нужно создать страницу, на которую пользователь будет перенаправляться, если инпут не заполнен. Предположим, что вы хотите, чтобы пользователь перенаправлялся на страницу OtherPage. Создайте компонент OtherPage.js со следующим содержимым:

import React from 'react';

function OtherPage() {
  return (
    <div>
      <h1>Other Page</h1>
      <p>This is the other page. You were redirected here because the input was not filled.</p>
    </div>
  );
}

export default OtherPage;

Теперь вам нужно добавить логику проверки заполнения инпута и перенаправления пользователя, если инпут не заполнен. Допустим, вы имеете компонент с формой и инпутом, где пользователь должен ввести данные:

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';

function HomePage() {
  const [inputValue, setInputValue] = useState('');
  const history = useHistory();

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!inputValue) {
      history.push('/other');
    }
  };

  return (
    <div>
      <h1>Home Page</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={inputValue} onChange={handleInputChange} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default HomePage;

В приведенном выше примере, мы используем хук useState для создания состояния inputValue, которое хранит значение инпута. Мы также используем хук useHistory из react-router-dom для получения объекта history, который позволяет нам перенаправлять пользователя.

При отправке формы, мы проверяем, заполнено ли значение инпута. Если инпут не заполнен (inputValue === ''), мы используем history.push('/other') для перенаправления пользователя на страницу OtherPage.

Теперь, когда инпут не заполнен, пользователь будет перенаправлен на страницу OtherPage. Если инпут заполнен, пользователь останется на текущей странице.