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

Question

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

我的代码

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

尽管在成功扫描之后，没有发生重定向。有人能指出在react中重定向的好方法吗?

Answer 1

useHistory钩子可以重定向到路由

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