Redirect not redirecting in a React application

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

How did you define your ``? – Sinan Yaman Apr 06 '21 at 14:44 — Sinan Yaman, Apr 06 '21 at 14:44
@SinanYaman, I added my `App.js` file with my `Route`s. – Daniel Apr 06 '21 at 15:21 — Daniel, Apr 06 '21 at 15:21

score 1 · Accepted Answer · answered Apr 06 '21 at 14:45

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.

answered Apr 06 '21 at 14:45

Brian Thompson

13,263
4
23
43

when I use `history.push()` I get `Warning: Can't perform a React state update on an unmounted component`. Referencing that `onfidoContainerId`. – Daniel Apr 06 '21 at 14:50
That sounds like you are successfully changing the page (meaning the current component will unmount and a new one will mount), but you're still trying to set state somewhere after your ajax request has resolved. – Brian Thompson Apr 06 '21 at 14:55
Probably from `setReceivedResults(obj === "clear")` since your redirect happens synchronously, but that function call happens asynchronously. – Brian Thompson Apr 06 '21 at 14:57
I was able to just stop trying to set state and unmount that sdk UI and redirect in the URL, but the component still does not render to the screen. – Daniel Apr 06 '21 at 15:11
I'm not sure what component you're referring to. Is it a component in the question or the one you're redirecting to? – Brian Thompson Apr 06 '21 at 15:17
I added my `App.js` file so you can see the components involved. So `/result` corresponds to the `Result` component. The `/result` URI is being redirected but the corresponding component is not rendering. – Daniel Apr 06 '21 at 15:22

Redirect not redirecting in a React application

1 Answers1