页面之间的路由 <Switch> ＆ <Redirect> 返回首页-ReactJS

Question

我的目标是将页面重定向到下一页。 基本上，当用户扫描会员卡时，必须出现一个弹出窗口，通知他一切正常，然后将其重定向到下一页。 到现在为止，我了解了扫描的状态，并出现了弹出窗口，但是它不会将我重定向到下一页。 我不知道该怎么解决这个问题？ 到目前为止，这是我的代码：

模块

import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom'
import { Redirect, Switch } from 'react-router'
import Route from 'react-router-dom/Route';
import BarcodeReader from 'react-barcode-reader';
import SPage from '../pages/SelectionPage'

HomeJS.js- 我的超时功能

class Home extends Component {

  constructor() {
    super();
    this.state = {
      okRedirect: true,
      modalOK: false
    }
    this.handleScan = this.handleScan.bind(this)
  }

  handleScan(data) {
    console.log('barcode is' + data);
    this.setState({
      modalOK: true
    })

    setTimeout( function() {
      console.log('setTimeOut OK');
      this.setState({ okRedirect: true });
      console.log('state redirect: ' + this.state.okRedirect);

    }.bind(this) , 3000)
  }

HomeJS.js *-其余代码*

 render() {
    return (

      <Router>
        <Switch>
         <Route exact path="/" render={() => (this.state.okRedirect? (
          <Redirect to="/SPage" component={SPage}/>
            ) : (
        <Route exact path='/'/>
        )
      )}/>
        <div className='home'>
          <div>
            <BarcodeReader
              onError={this.handleError}
              onScan={this.handleScan}
            />
            <p>{this.state.result}</p>
               ...
         </Switch>
      </Router>

Answer 1

而不是Redirect使用Route转到所需的页面。

<Route exact path="/" render={() => (this.state.okRedirect &&
          <Route path="/SPage" component={SPage}/>) }/>

或者您可以定义/SPage的Route并进行Redirect

Answer 2

其实并不一定要使用<Redirect/> 。 我的问题的简单答案是：

class Home extends Component {

  constructor() {
    super();
    this.state = {
      okRedirect: false,
      modalOK: false
    }

    this.handleScan = this.handleScan.bind(this)
  }

  handleScan(data) {

    this.setState({
      modalOK: true
    })

    setTimeout( function() {

      this.setState({ okRedirect: true });


    }.bind(this) , 3000)
  }

  render() {

    if (this.state.okRedirect) {
      console.log('State is changed');
      return (

        <SelectionPage/>
      );

    }