Redirect not redirecting in a React application - reactjs

Question

I am trying to implement Redirect from react-router-dom and it's redirecting in the URL, but not re-rendering the corresponding component.
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} />
)
}
I am not getting any errors in console. This is the App.js file with all of my components:
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>
);
};

Answer 1

Redirect is a component that must be rendered in order to have an effect, you're returning it from the hook but not doing anything with it.
You're looking for history.push('/result'). It serves the same purpose, but instead of rendering a component responsible for the redirect, you do it programmatically by updating the history.
See the docs on the useHistory.