重定向不是在 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 上的文档。