React Router отображает родительский компонент - PullRequest
Новая
       7

React Router отображает родительский компонент

0 голосов
/ 18 марта 2020

У меня есть компонент 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. Как я могу предотвратить это?

SignUpPage 

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

SignUpForm 

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

1 Ответ

0 голосов
/ 18 марта 2020

Сделайте ваш 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 кроме этого компонента.

...