时间戳

首页 > 解决方案 > 页面之间的路由&返回主页 - ReactJS

javascript - 页面之间的路由&返回主页 - ReactJS

问题描述

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

模块

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>

标签： javascriptreactjsreact-router

解决方案

而不是Redirect用来Route转到您想要的页面。

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

或者您可以定义您的Routefor/SPage并执行Redirect

推荐阅读