Question

这些是我在Router.js中的主要路线

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

这些是我在首页下的嵌套路线。目前，Dashboard和HomePage正在运行，但是“忘记密码”和“注册”不起作用。我只能看到没有错误的白色空白页面。

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

到达路由/forgot-password时发生的是，由于exact导致HomePage路由不再匹配，从而导致卸载了整个Home组件，因此也卸载了子路由。

您必须将子路由上移一个级别，例如，在您定义本地路由的位置旁边的Routes.js中。或者，您可以删除exact并威胁将Home组件作为呈现所有公共元素（例如，页眉和页脚）的组件，但是在这种情况下，我不会将其称为Home，但可能将其称为Main。

Answer 2

问题是“订单”，我将首页路由放在了仪表板之后，现在可以使用了。

React Router v4-嵌套路由不起作用

2 个答案: