Маршрутизация между страницами с <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/>.Простой ответ на мой вопрос:

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/>
      );

    }

Answer 2

Вместо Redirect используйте Route для перехода на нужную страницу.

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

или вы можете определить Route для /SPage и выполнить Redirect