React Router 渲染父组件

Question

我有一个 MainPage 组件，它呈现 LoginPage 组件。在LoginPage 中有LoginForm 可以路由到SignUpPage。当我路由到SingUpPage 在它之上LoginPage 再次呈现时，我该如何解决这个问题？

MainPage.js

render() {
    return (
        <div className={'main-container'}>
            <LoginPage />
        </div>
    );
}

LoginPage.js

render() {
    let { loginReducer } = this.props;
    //console.log('Login Reducer', loginReducer);

    return(
        <div className={'login-page-container'}>
            <LoginForm />
        </div>
    );
}

LoginForm.js

...form inputs, buttons etc
<Route path='/signup' component={SignUpPage} />
<Route path='/forgot-password' component={ForgotPassword} />

在LoginForm 中，我可以路由到SignUpPage，但在它之上还有LoginForm。如何预防？

注册页面

return(
        <div className={'container'}>
            <SignUpForm />
        </div>
    );

注册表格

... text inputs, buttons etc
<Route path='/login' exact component={LoginPage} />

Answer 1

使您的 AppRouter 成为您的 MainPage 的父级。从这个 AppRouter 类做所有的路由工作。

在你的AppRouter中，有以下路由

<Route path='/' exact component={LoginPage} /> // OR MainPage
<Route path='/login' exact component={LoginPage} />
<Route path='/signup' exact component={SignUpPage} />
<Route path='/forgot-password' exact component={ForgotPassword} />

不要定义除此组件之外的任何其他Route。