Почему не заменяются компоненты при роутинге?

Question

[historydev]

Добрый вечер. Сижу часов 7(Не над этим вопросом), вопрос может быть глупым. Мои догадки состоят в том, что ссылки и саму форму нужно реализовывать в одном и том-же роуте, но я не понимаю как это сделать при ситуативной генерации формы. Тык. Спасибо.

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

[hzzzzl]

еслия правильно понял, то потому что в help_functions.js не нужен еще один экземпляр Router, потому что эти формы будут вложены в "главный" роутер из Content

Comments

[historydev]

Я тоже пришёл к такому выводу, сейчас обновлю код, результата нет

[historydev]

Update

[historydev]

Если строить роутинг вот так, то при нажатии на ссылку Регистрация, она появляется но не пропадает авторизация, а при клике на ссылку Авторизация, просто пропадает Регистрация.

<Router>

                <Authenticate />

                <Switch>
                    {/*<Route path="/">*/}
                    {/*    <Authenticate />*/}
                    {/*</Route>*/}
                    <Route path="/register">
                        <Register />
                    </Route>
                </Switch>

            </Router>

[paoluccio]

Владимир, exact перед path="/"

[historydev]

paoluccio, большое спасибо! Можно статейку или ссылку на документацию, может пару слов о том зачем и как это работает?

[paoluccio]

Владимир, здесь.
Работает приблизительно так (в действительности же, через регулярные выражения):
С exact: window.location.pathname === path
Без exact: window.location.pathname.startsWith(path)
Ну и Switch прекращает дальнейшую цепочку сравнений, после первого совпадения.

[historydev]

paoluccio, спасибо