Javascript <；重定向/>；返回一个空白页-ReactJS

嘿，伙计们，当用户成功登录后，我正试图使用

从

react router

将其发送到主页。但直到现在都没有成功。超时正在工作，但它将我发送到一个空白页，而不是

Home.js

。你知道如何解决这个问题吗

确认.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;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router}
从“react router”导入{Redirect}
从“反应路由器dom/路由”导入路由；
从“./主页”导入主页
类确认扩展组件{
状态={
重定向：false
}
componentDidMount（）{
this.id=setTimeout（（）=>this.setState（{redirect:true}），3000）
}
组件将卸载（）{
clearTimeout（this.id）
}
render（）{
//setTimeout（函数（）{alert（'Hello！'）；}，3000）；
返回(
{
返回此.state.redirect
? 
: 
确认会议
好的，你可以走了。你的课程已经开始了

}
} />
);
}
}
导出默认确认；

你的

需要一个挨着另一个生活：

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>
}

if（this.state.redirect）{
返回
}否则{
您的确认页面
}

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

还可以查看react路由器库中的

组件

编辑：

您的

需要一个挨着另一个生活：

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>
}

if（this.state.redirect）{
返回
}否则{
您的确认页面
}

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

还可以查看react路由器库中的

组件

---

编辑：

渲染

重定向

组件只会将路径设置为

/

，它本身不会渲染任何内容。在你的应用程序中，你仍然需要一个

。是的，这已经成功了。但是现在，当它呈现主视图时，它与

className='Success'

具有相同的背景，因为

仅在

内部工作。呈现

重定向

组件只会将路径设置为

/

，它本身不会呈现任何内容。在你的应用程序中，你仍然需要一个

。是的，这已经成功了。但是现在，当它呈现主视图时，它的背景与

className='Success'

相同，因为

只在

内部工作{返回this.state.redirect？：已确认会话好的，可以开始了。会话已开始。

}/>`为了使我的``工作，我必须返回一个状态，否则它不会返回，但我仍然从上一个屏幕而不是主页接收BG是的，这就完成了工作。干杯，伙计{返回this.state.redirect？：已确认会话好的，可以开始了。会话已开始。

}}/>`为了使我的``工作，我必须返回一个状态，否则它不会返回，但我仍然从上一个屏幕接收BG，而不是从主页接收BG是的，这就完成了工作。干杯，伙计！