如何解决重定向不是在 React 应用程序中重定向
我正在尝试从 Redirect
实现 react-router-dom
并且它在 URL 中重定向,但没有重新呈现相应的组件。
import React,{useEffect,useState} from 'react';
import axios from 'axios';
import * as OnfidoSDK from 'onfido-sdk-ui/dist/onfido.min.js';
import 'onfido-sdk-ui/dist/style.css';
import {Redirect} from 'react-router-dom';
const onfidoContainerId = 'onfido-sdk-wrapper';
const transmitAPI = 'third/party/api/url';
const uSEOnfidoFetch = (URL) => {
const [token,setToken] = useState();
const [id,setId] = useState();
const [isClear,setIsClear] = useState(false);
useEffect(() => {
axios
.get("http://localhost:5000/post_stuff")
.then((response) => response.data.data.data.json_data)
.then((json_data) => {
console.log("this is the json data",json_data);
const id = json_data.applicant_id;
const token = json_data.onfido_sdk_token;
setId(id);
setToken(token);
});
},[URL]);
useEffect(() => {
if (!token) return;
console.log("this is working!");
onfidoOut = OnfidoSDK.init({
token,containerId: "root",steps: [
{
type: "welcome",options: {
title: "Open your new bank account",},"document",],onComplete: function (data) {
console.log("everything is complete");
console.log("this is the applicant id",id);
let obj;
axios
.post("http://localhost:5000/post_id",{
applicant_id: id,})
.then((response) => {
obj = response.data.data.data.json_data.result;
setReceivedResults(obj === "clear");
});
if (setReceivedResults) {
onfidoOut.tearDown();
return <Redirect to="/result" />
} else {
return null;
}
},});
},[id,token]);
};
export default function() {
const URL = `${transmitAPI}/anonymous_invoke?aid=onfido_webapp`;
const result = uSEOnfidoFetch(URL,{});
return (
<div id={onfidoContainerId} />
)
}
我在控制台中没有收到任何错误。这是包含我所有组件的 App.js
文件:
import Landing from './components/Landing';
import Onfido from './components/Onfido';
import Result from './components/Result';
export default () => {
return (
<div>
<StylesProvider>
<browserRouter>
<Switch>
<Route exact path="/onfido" component={Onfido} />
<Route exact path="/result" component={Result} />
<Route path="/" component={Landing} />
</Switch>
</browserRouter>
</StylesProvider>
</div>
);
};
解决方法
Redirect
是一个必须渲染才能产生效果的组件,您从钩子中返回它,但不对其进行任何操作。
您正在寻找history.push('/result')
。它用于相同的目的,但不是呈现负责重定向的组件,而是通过更新 history
以编程方式完成。
请参阅 useHistory
上的文档。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。