javascript - <Redirect/> 返回空白页面 - ReactJS

Question

嘿大家，我正在尝试使用 <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;

Answer 1

您的<Route />需要一个挨着一个住:

root.js

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

确认.js

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

现在您可以从一个页面重定向到另一个页面，并且整个页面都应该被替换。

另请查看 <Switch>来自react-router库的组件。

编辑: Redirect isn't expecting a component prop