Почему не происходит Navigate?
Помогите разобраться, почему не происходит переход на /main и как это исправить
Код компонента Login
import React, { useState } from 'react'; import { Navigate } from "react-router-dom"; import axios from 'axios'; import './login.css'; function Login() { const [login, setLogin] = useState(''); const [password, setPassword] = useState(''); const [loginClass, setLoginClass] = useState(''); const [passwordClass, setPasswordClass] = useState(''); const [isLoggedIn, setIsLoggedIn] = useState(false); const submit = async (evt) => { evt.preventDefault(); // Предотвращаем отправку формы console.log(login, password); if (login.length === 0 || password.length === 0) { console.log('stop') if (!login) { // Проверяем, не пустое ли поле login setLoginClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно } if (!password) { // Проверяем, не пустое ли поле password setPasswordClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно } } else { console.log('req') await axios .post('http://localhost:5000/test/auth/login', { login: login, password: password }) .then((response) => { console.log(response); const { data } = response; if (data.status == 200) { console.log('entered successfully'); // Здесь изменяется состояние setIsLoggedIn(true); } else { console.log('could not enter'); } }) .catch((error) => { console.log(error); }); setPassword(''); setLogin(''); setLoginClass(''); setPasswordClass(''); } // тут должен происходить переход if (isLoggedIn) { return <Navigate to="/main" replace={true}/> } return }; return ( <div className="container col-xl-10 col-xxl-8 px-4 py-5"> <div className="row align-items-center g-lg-5 py-5"> <div className="col-lg-7 text-center text-lg-start "> <h1 className="display-4 fw-bold lh-1 text-body-emphasis mb-3">Library21</h1> <p className="col-lg-10 fs-4"> Библиотека21 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex dolorem iusto animi vitae suscipit deleniti! </p> </div> <div className="col-md-10 mx-auto col-lg-5"> <form className="p-4 p-md-5 border rounded-3 bg-body-tertiary"> <h2 className="mb-4">Вход</h2> <div className="form-floating mb-3"> <input type="text" className={`form-control ${loginClass}`} id="login" placeholder="Введите логин" value={login} onChange={(evt) => { setLogin(evt.target.value) }} /> <label htmlFor="login">Логин</label> </div> <div className="form-floating mb-3"> <input type="password" className={`form-control ${passwordClass}`} id="password" placeholder="Введите пароль" value={password} onChange={(evt) => { setPassword(evt.target.value) }} /> <label htmlFor="password">Пароль</label> </div> <button className="w-100 btn btn-lg btn-primary" onClick={submit}>Войти</button> </form> </div> </div> </div> ); } export default Login; |
import React, { useState } from 'react'; import { Navigate } from "react-router-dom"; import axios from 'axios'; import './login.css'; function Login() { const [login, setLogin] = useState(''); const [password, setPassword] = useState(''); const [loginClass, setLoginClass] = useState(''); const [passwordClass, setPasswordClass] = useState(''); const [isLoggedIn, setIsLoggedIn] = useState(false); const submit = async (evt) => { evt.preventDefault(); // Предотвращаем отправку формы console.log(login, password); if (login.length === 0 || password.length === 0) { console.log('stop') if (!login) { // Проверяем, не пустое ли поле login setLoginClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно } if (!password) { // Проверяем, не пустое ли поле password setPasswordClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно } } else { console.log('req') await axios .post('http://localhost:5000/test/auth/login', { login: login, password: password }) .then((response) => { console.log(response); const { data } = response; if (data.status == 200) { console.log('entered successfully'); // Здесь изменяется состояние setIsLoggedIn(true); } else { console.log('could not enter'); } }) .catch((error) => { console.log(error); }); setPassword(''); setLogin(''); setLoginClass(''); setPasswordClass(''); } // тут должен происходить переход if (isLoggedIn) { return <Navigate to="/main" replace={true}/> } return }; return ( <div className="container col-xl-10 col-xxl-8 px-4 py-5"> <div className="row align-items-center g-lg-5 py-5"> <div className="col-lg-7 text-center text-lg-start "> <h1 className="display-4 fw-bold lh-1 text-body-emphasis mb-3">Library21</h1> <p className="col-lg-10 fs-4"> Библиотека21 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex dolorem iusto animi vitae suscipit deleniti! </p> </div> <div className="col-md-10 mx-auto col-lg-5"> <form className="p-4 p-md-5 border rounded-3 bg-body-tertiary"> <h2 className="mb-4">Вход</h2> <div className="form-floating mb-3"> <input type="text" className={`form-control ${loginClass}`} id="login" placeholder="Введите логин" value={login} onChange={(evt) => { setLogin(evt.target.value) }} /> <label htmlFor="login">Логин</label> </div> <div className="form-floating mb-3"> <input type="password" className={`form-control ${passwordClass}`} id="password" placeholder="Введите пароль" value={password} onChange={(evt) => { setPassword(evt.target.value) }} /> <label htmlFor="password">Пароль</label> </div> <button className="w-100 btn btn-lg btn-primary" onClick={submit}>Войти</button> </form> </div> </div> </div> ); } export default Login;
Код main.jsx
import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' import Login from './pages/login-page/Login' import { createBrowserRouter, RouterProvider, } from "react-router-dom"; const router = createBrowserRouter([ { path: "/", element: <Login />, }, { path: "/main", element: <div>Main Page</div> } ]); ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> {/* <Login /> */} <RouterProvider router={router} /> </React.StrictMode>, ) |
import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' import Login from './pages/login-page/Login' import { createBrowserRouter, RouterProvider, } from "react-router-dom"; const router = createBrowserRouter([ { path: "/", element: <Login />, }, { path: "/main", element: <div>Main Page</div> } ]); ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> {/* <Login /> */} <RouterProvider router={router} /> </React.StrictMode>, )
Дополнительно:
Ответы:
import React, { useState } from 'react'; import { Navigate } from "react-router-dom"; import axios from 'axios'; import './login.css'; function Login() { const [login, setLogin] = useState(''); const [password, setPassword] = useState(''); const [loginClass, setLoginClass] = useState(''); const [passwordClass, setPasswordClass] = useState(''); const [isLoggedIn, setIsLoggedIn] = useState(false); const submit = async (evt) => { evt.preventDefault(); // Предотвращаем отправку формы console.log(login, password); if (login.length === 0 || password.length === 0) { console.log('stop') if (!login) { // Проверяем, не пустое ли поле login setLoginClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно } if (!password) { // Проверяем, не пустое ли поле password setPasswordClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно } } else { console.log('req') await axios .post('http://localhost:5000/test/auth/login', { login: login, password: password }) .then((response) => { console.log(response); const { data } = response; if (data.status == 200) { console.log('entered successfully'); // Здесь изменяется состояние setIsLoggedIn(true); } else { console.log('could not enter'); } }) .catch((error) => { console.log(error); }); setPassword(''); setLogin(''); setLoginClass(''); setPasswordClass(''); } }; if (isLoggedIn) { return <Navigate to="/main" replace={true}/> } return ( <div className="container col-xl-10 col-xxl-8 px-4 py-5"> <div className="row align-items-center g-lg-5 py-5"> <div className="col-lg-7 text-center text-lg-start "> <h1 className="display-4 fw-bold lh-1 text-body-emphasis mb-3">Library21</h1> <p className="col-lg-10 fs-4"> Библиотека21 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex dolorem iusto animi vitae suscipit deleniti! </p> </div> <div className="col-md-10 mx-auto col-lg-5"> <form className="p-4 p-md-5 border rounded-3 bg-body-tertiary"> <h2 className="mb-4">Вход</h2> <div className="form-floating mb-3"> <input type="text" className={`form-control ${loginClass}`} id="login" placeholder="Введите логин" value={login} onChange={(evt) => { setLogin(evt.target.value) }} /> <label htmlFor="login">Логин</label> </div> <div className="form-floating mb-3"> <input type="password" className={`form-control ${passwordClass}`} id="password" placeholder="Введите пароль" value={password} onChange={(evt) => { setPassword(evt.target.value) }} /> <label htmlFor="password">Пароль</label> </div> <button className="w-100 btn btn-lg btn-primary" onClick={submit}>Войти</button> </form> </div> </div> </div> ); } export default Login; |
import React, { useState } from 'react'; import { Navigate } from "react-router-dom"; import axios from 'axios'; import './login.css'; function Login() { const [login, setLogin] = useState(''); const [password, setPassword] = useState(''); const [loginClass, setLoginClass] = useState(''); const [passwordClass, setPasswordClass] = useState(''); const [isLoggedIn, setIsLoggedIn] = useState(false); const submit = async (evt) => { evt.preventDefault(); // Предотвращаем отправку формы console.log(login, password); if (login.length === 0 || password.length === 0) { console.log('stop') if (!login) { // Проверяем, не пустое ли поле login setLoginClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно } if (!password) { // Проверяем, не пустое ли поле password setPasswordClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно } } else { console.log('req') await axios .post('http://localhost:5000/test/auth/login', { login: login, password: password }) .then((response) => { console.log(response); const { data } = response; if (data.status == 200) { console.log('entered successfully'); // Здесь изменяется состояние setIsLoggedIn(true); } else { console.log('could not enter'); } }) .catch((error) => { console.log(error); }); setPassword(''); setLogin(''); setLoginClass(''); setPasswordClass(''); } }; if (isLoggedIn) { return <Navigate to="/main" replace={true}/> } return ( <div className="container col-xl-10 col-xxl-8 px-4 py-5"> <div className="row align-items-center g-lg-5 py-5"> <div className="col-lg-7 text-center text-lg-start "> <h1 className="display-4 fw-bold lh-1 text-body-emphasis mb-3">Library21</h1> <p className="col-lg-10 fs-4"> Библиотека21 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex dolorem iusto animi vitae suscipit deleniti! </p> </div> <div className="col-md-10 mx-auto col-lg-5"> <form className="p-4 p-md-5 border rounded-3 bg-body-tertiary"> <h2 className="mb-4">Вход</h2> <div className="form-floating mb-3"> <input type="text" className={`form-control ${loginClass}`} id="login" placeholder="Введите логин" value={login} onChange={(evt) => { setLogin(evt.target.value) }} /> <label htmlFor="login">Логин</label> </div> <div className="form-floating mb-3"> <input type="password" className={`form-control ${passwordClass}`} id="password" placeholder="Введите пароль" value={password} onChange={(evt) => { setPassword(evt.target.value) }} /> <label htmlFor="password">Пароль</label> </div> <button className="w-100 btn btn-lg btn-primary" onClick={submit}>Войти</button> </form> </div> </div> </div> ); } export default Login;
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, когда не происходит Navigate, может быть вызвана несколькими причинами. Вот некоторые из них:
1. Неправильно указан путь к файлу или URL. Убедитесь, что путь указан правильно и файл или URL существует. Проверьте также права доступа к файлу или URL.
2. Ошибка в коде, который обрабатывает Navigate. Проверьте свой код на наличие ошибок, опечаток или недочетов. Убедитесь, что функция Navigate вызывается правильно и все необходимые параметры передаются.
3. Проблемы с браузером или плагинами. Иногда Navigate может не работать из-за конфликтов с другими расширениями или настройками браузера. Попробуйте использовать другой браузер или отключить все плагины, чтобы исключить возможные конфликты.
Пример кода на PHP, который может вызывать Navigate:
$url = "https://www.example.com"; if (isset($_GET['page'])) { $page = $_GET['page']; $url .= "/" . $page; } header("Location: $url"); exit;
Если проблема не устраняется после проверки вышеперечисленных пунктов, рекомендуется обратиться к специалисту по веб-разработке или технической поддержке для дальнейшей диагностики и устранения проблемы.