возвращает пустую страницу - ReactJS - PullRequest
0 голосов
/ 21 января 2019

Эй, ребята, я пытаюсь отправить пользователя на домашнюю страницу, используя <Redirect/> из react-router, когда они успешно вошли в систему. Но безуспешно до сих пор. Тайм-аут работает, но он отправляет меня на пустую страницу, а не на Home.js. Есть идеи, как решить эту проблему?

Confirm.js

import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom'
import { Redirect } from 'react-router'
import Route from 'react-router-dom/Route';

import Home from './HomePage'

class Confirm extends Component {


    state = {
        redirect: false
    }
    componentDidMount() {
        this.id = setTimeout(() => this.setState({ redirect: true }), 3000)
    }
    componentWillUnmount() {
        clearTimeout(this.id)
    }
    render() {
        // setTimeout(function(){alert('Hello!');},3000); 
        return (
            <Router>
                <div className='Confirm'>
                    <Route path='/confirm' render={
                        () => {
                            return this.state.redirect
                                ? <Redirect exact to="/" component={Home} />
                                : <div className='Success'>
                                    <h1>Confirmed Session</h1>
                                    <p>Okay you are good to go . Your session has started .</p>

                                </div>

                        }
                    } />
                </div>
            </Router>
        );
    }
}
export default Confirm;

1 Ответ

0 голосов
/ 21 января 2019

Ваши <Route /> должны жить один рядом с другим:

root.js

<Router>
  <Switch>  
    <Route path="/" component={Home} />
    <Route path="/confirm" component={Confirm} />
  </Switch>
</Router>

confirm.js

if (this.state.redirect) {
  return <Redirect to="/" >
} else {
  <div>
    your confirm page
  </div>
}

Теперь вы можете перенаправить с одного на другое, и вся страница должна быть заменена.

Также взгляните на компонент <Switch> из библиотекиact-router.

РЕДАКТИРОВАТЬ: Перенаправление не ожидает пропеллер компонента

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...