二维码扫描后如何添加重定向

Question

我有一个扫描二维码的二维码应用程序，它可以工作。我想在扫描成功后添加重定向操作。

这是我的代码

import React, {Component} from "react";
import ReactDOM from 'react-dom';
import { Redirect } from "react-router-dom";
import BarcodeScannerComponent from "react-qr-barcode-scanner";


class QR extends Component {


      constructor(props) {
        super(props);
        this.state = {
          data: "Not Found"
        };
      }

    render() {
        return (
   
          <>
          <BarcodeScannerComponent
            width={500}
            height={500}
            onUpdate={(err, result) => {
              if (result) {
                this.setState({data: result.text});
         
                return <Redirect to={this.state.data} />
                
              }
              else this.setState({data: "Not Found"});
            }}
            
          />
          <p>{this.state.data}</p>
        </>

        );
      }

}


ReactDOM.render(
    <QR />,
    document.getElementById('qr-id')
);

虽然在成功扫描后，不会发生重定向。有人可以指出在反应中进行重定向的好方法吗？

Answer 1

useHistory hook 可以重定向到路由

import React, { useState, useEffect } from "react";
import ReactDOM from 'react-dom';
import { useHistory } from "react-router-dom";
import BarcodeScannerComponent from "react-qr-barcode-scanner";
const QR = () => {
    const { data, setData } = useState('Not Found');
    const history = useHistory();
    useEffect(()=>{
        if(data==='Not Found') {
            return;
        }
        history.push(data);
    }, [data])
    return
    <>
        <BarcodeScannerComponent
            width={500}
            height={500}
            onUpdate={(err, result) => {
                if (result) {
                    setData(result.text);
                }
                else setData("Not Found");
            }}

        />
        <p>{data}</p>
    </>
}