Why are components not replaced during routing?

Question

JavaScript

Good evening. I sit for 7 hours (Not on this issue), the question may be stupid. My guess is that the links and the form itself need to be implemented in the same route, but I do not understand how to do this when generating the form situationally. Tyk . Thank you.

content.js

export default function Content() {
    return (
        <main>

            <Router>

                <Link to="/">Авторизация</Link>
                <Link to="register">Регистрация</Link>

                <Switch>
                    <Route path="/">
                        <Authenticate />
                    </Route>
                    <Route path="/register">
                        <Register />
                    </Route>
                </Switch>

            </Router>

        </main>
    )
}

function Register() {
    return createForm('register', 'POST', '/', 'Регистрация:', 2)
}

function Authenticate() {
    return createForm('authenticate', 'POST', '/', 'Войти в систему:', 1)
}

help_functions.js

function createForm(id, method, action, title, type) {

    if(type !== null && type === 1) {
        return (
            <form action={action} method={method} className='form' id={id}>

                <div className="title">{title}</div>

                {createInput('email', 'E-mail', 'text')}
                {createInput('password', 'Password', 'password')}

                {createButton('authenticate-submit', 'Войти', null)}

            </form>
        )
    } else if(type !== null && type === 2) {
        return (
            <form action={action} method={method} className='form' id={id}>

                <div className="title">{title}</div>

                { createInput('name', 'Имя', 'text') }
                { createInput('email', 'E-mail', 'text') }
                { createInput('password', 'Password', 'password') }

                { createButton('register-submit', 'Регистрация', null) }

            </form>
        )
    }
}

Answer 1

if I understand correctly, then because help_functions.js does not need another instance of Router, because these forms will be nested in the "main" router from Content