React Router v4 - вложенные маршруты не работают

Question

Это мои основные маршруты в Router.js

const Routes = () => {
    return ( 
        <Switch>
            <Route path="/" exact component={HomePage} />
            <Route path="/dashboard" component={Dashboard} />
        </Switch>
    );
}

И это мои вложенные маршруты под домашней страницей.Прямо сейчас Dashboard и HomePage работают, но Forget-Password и Sign-up не работают.Я вижу только белую пустую страницу без ошибки.

render() {
     const {match} = this.props;
    return (
        <div className="container home-grid">
            <div className="featured">
                <Featured />
            </div>
            <div className="home-forms">
                <div className="logo">
                    <Logo />
                </div>
                <TransitionGroup className="route-page">
                    <CSSTransition
                        key={location.pathname}
                        timeout={{ enter: 800, exit: 800 }}
                        classNames="page"
                    >
                        <section className="route-section">
                            <Switch>
                                <Route exact path={match.path} component={SignIn}/>
                                <Route path={`${match.path}forgot-password`} component={ForgotPassword} />


                            </Switch>
                        </section>
                    </CSSTransition>
                </TransitionGroup>
                <div className="footer-text">
                    <Text specialClass="footer"></Text>
                </div>
            </div>
        </div>
    )
}

Вход выполняется, но другие маршруты - нет.Что я делаю не так?

Answer 1

Проблема была в "заказе", я поставил маршрут HomePage после Dashboard, теперь он работает.

Answer 2

То, что происходит, когда вы достигаете маршрута /forgot-password, заключается в том, что маршрут HomePage больше не совпадает из-за exact, что приводит к размонтированию всего компонента Home и, таким образом, размонтированию и подпутей.

Вы должны переместить подуровни на один уровень вверх, например, в свой Routes.js рядом с тем местом, где вы определяете домашний маршрут. Или вы можете удалить exact и поставить под угрозу компонент Home как компонент, который отображает все общие элементы (например, верхний и нижний колонтитулы), но в этом случае я бы не назвал его Home, но, возможно, Main или около того.