Накладываются компоненты при использовании react router

Question

Я начал осваивать react router, хочу сделать переход с окна регистрации на окно авторизации. Вроде как переход сделал, но появилась проблема с наложением компонентов друг на друга при нажатии на кнопку "Регистрация" (причем, url меняется):

Подскажите, пожалуйста, в чем моя ошибка?

import { Form, Button } from "react-bootstrap";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Authorization from "./authorization";

import "./modal-form.css"

export default class Registration extends Component {
    render() {
        return(
            <>
                <Form className="modal-form">
                    <p className="label">Регистрация</p>
                    <Form.Control 
                        className="modal-form__item"
                        type="text"
                        placeholder="Имя"/>
                    <Form.Control
                        className="modal-form__item"
                        type="text"
                        placeholder="Фамилия"/>
                    <Form.Control
                        className="modal-form__item"
                        type="text"
                        placeholder="Отчество"/>
                    <Form.Control
                        className="modal-form__item"
                        type="text"
                        placeholder="Login"/>
                    <Form.Control
                        className="modal-form__item"
                        type="text"
                        placeholder="E-mail"/>
                    <Form.Control
                        className="modal-form__item"
                        type="password"
                        placeholder="Пароль"/>
                    <Form.Control
                        className="modal-form__item"
                        type="password"
                        placeholder="Подтвердите пароль"/>

                    <Button  
                        variant="success"
                        className="button"
                        href="/authorization"
                        >
                            Регистрация
                    </Button>
                </Form>

                <Router>
                    <Routes>
                        <Route exact path="/authorization" element={ <Authorization/> }/>
                    </Routes>
                </Router>
            </>
        )
    }
}```

Answer 1

Если вам нужно выполнить переход на окно с авторизацией, то можете обернуть кнопку регистрация в тег Link(импортировать Link из react-router-dom). И сделать отдельную страницу с этой формой, которая будет доступна по адресу /authorization.

<Link to = "/authorization" >
  <Button
    variant = "success"
    className = "button"
    href = "/authorization" >
  Регистрация 
  </Button> 
< /Link >

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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

БЛОГ НА HUSL

Накладываются компоненты при использовании react router

Ответы (1 шт):