Как совместить несколько роутеров?

Question

[historydev]

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

Роутер всего приложения (работает от меню в шапке (компонента ) из него я возвращаю меню с Link-ами)

export default function App() {
    return (
        <div>

            <Router>

                <Header />

                <Switch>
                    <Route path='/company'>
                        <GetCompanyPage name={
                            {
                                firstChild: 'Омега',
                                lastChild: 'Пласт'
                            }
                        } title='ПРОИЗВОДИТЕЛЬ ИЗДЕЛИЙ ИЗ ПЛАСТИКА' />
                    </Route>
                </Switch>

                <Footer />

            </Router>
        </div>
    );
}

А вот роутер формы, да, вы будете правы если скажете мол напиши exact и будет работать, но в этом и прикол, exact насколько я понимаю принимает все роуты и при смене допустим на /register у меня не отображается компания, а при смене на компанию, пропадает форма

export default function FormRouter() {

    return (

        <Router>

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

        </Router>

    )

}

function Register() {
    return <CreateForm id='register' method='POST' action='/register' title='Регистрация в системе:' formType={2} />
}

function Authenticate() {
    return <CreateForm id='authenticate' method='POST' action='/' title='Войти в систему:' formType={1} />
}

Спасибо.

Answer 1

[Robur]

поменяйте местами Route в Switch, чтобы сначала /register срабатывал, а если там что-то другое, то уже сработает /
Сейчас у вас всегда будет / срабатывать

Comments

[historydev]

Офигеть, я что угодно пробовал, но не самое простое, спасибо большое!

[historydev]

А скажите пожалуйста как в таком случае реализовать страницу 404?

[historydev]

Я предположил что можно как-то так, но это не работает:

<Switch>
                <Route path={`${url}register`}>
                    <CreateForm id='register' method='POST' link={url} action='/register' title='Регистрация в системе:' formType={2} />
                </Route>
                <Route path={`${url}`}>
                    <CreateForm id='authenticate' method='POST' link={url} action='/' title='Войти в систему:' formType={1} />
                </Route>
                <Route path={`${url}*`}>
                    <CreateForm id='register' method='POST' link={url} action='/register' title='Регистрация в системе:' formType={2} />
                </Route>
            </Switch>

[Robur]

Владимир, почитайте документацию, вместо предположений, вопросов будет меньше.
https://reacttraining.com/react-router/web/example...

[historydev]

Robur, да, спасибо, я разобрался)