0

Не могу понять в чём ошибка в маршрутизации. Буду очень благодарен за ответ.

import React from "react";
import './App.css';
import Home from './home';
import { Route, Routes, Link, Router } from 'react-router-dom';

function App() {
  



  return (
    
        <><div className="container">
      <div id="bg">
        <div className="form-box">
          <h1>Вход</h1>
          <form name="login">
            <div className="input-group">
              <div className="input-field">
                <input type="text" name="username" placeholder="Логин" />
              </div>
              <div className="input-field">
                <input type="password" name="password" placeholder="Пароль" />
              </div>
            </div>
            <div className="btn-field">
            <button type="submit" value="Login"><Link to="/home">Войти</Link></button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <Routes>
    <Route path="/App/*" element={<App />} /> 
        <Route path="/home" element={<Home />} />
      </Routes>
      </>
     
  );

}



export default App;


import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    <BrowserRouter>
    <App />
    </BrowserRouter>
  
);


reportWebVitals();

введите сюда описание изображения

2
  • А что именно не работает, можно поподробнее?
    – Object417
    12 янв в 22:03
  • Переход на другую страницу, при нажатии на Link в button.
    – Bob
    12 янв в 22:24

1 ответ 1

0

Осмелюсь предположить: это потому, что у вас <button type="submit">. При сабмите формы страница автоматически перезагружается. По идее, путь должен сохраняться, но это в любом случае не хорошо. Поставьте кастомную обработку сабмита формы, чтобы прерывать стандартное поведение.

function handleSubmit(e) {
  e.preventDefault()
  e.stopPropagation()
}

return (
  <form onSubmit={handleSubmit}>
    <button type="submit">
      <Link to="/home">Home</Link>
    </button>
  </form>
)
2
  • Спасибо! Заработало. Остался один нюанс, при переходе через кнопку новая страница появляется снизу. Как сделать чтобы был полноценный переход на неё?
    – Bob
    12 янв в 23:07
  • Вы ведь именно это в компоненте App и написали: сначала отрисуй мне форму входа, а потом страницу по роуту. Просто сделайте форму отдельным компонентом и возвращайтесь только тогда, когда нужно.
    – Object417
    13 янв в 11:17

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.