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

Question

这些是我在路由器中的主要路由.js

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

这些是我在主页下的嵌套路线。现在仪表板和主页正在工作，但忘记密码和注册不起作用。我只能看到白色空白页而没有错误。

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导致卸载整个 Home 组件，因此它也会卸载子路由，因此主页路由不再匹配。

您必须将子路由上移一级，例如在路由中.js位于定义主路由的位置旁边。或者您可以删除exact并威胁将 Home 组件作为呈现所有常见元素(例如页眉和页脚(的组件，但在这种情况下，我不会将其称为 Home，但可能会Main左右。

Answer 2

问题是"订单"我把主页路由放在仪表板之后，它现在可以工作了。