React Route 陷入无限循环答案

【问题标题】：React Route running into an infinite loopReact Route 陷入无限循环
【发布时间】：2020-08-21 14:51:34
【问题描述】：

在调试我的代码中的无限反应路由器错误时，我非常需要您的帮助。我的网站在本地保存注册详细信息时使用 sessionStorage，然后在注册过程结束时上传它们。

window.sessionStorage.setItem("agreement", "true");
window.sessionStorage.setItem("token", "token");
window.sessionStorage.setItem("email", "email");
window.sessionStorage.setItem("country_code", "44");
window.sessionStorage.setItem("firstName", "First name");
window.sessionStorage.setItem("lastName", "Last name");
window.sessionStorage.setItem("userPhone", "XXXXXXXXX");
window.sessionStorage.setItem("verified", "true");

编辑问题出现在/location 和/setup 路由之间。其他路线一直运行良好，所以我不明白为什么它不起作用

/location

import React, {useState, useEffect} from 'react';
/* eslint-disable react-hooks/exhaustive-deps */
const LocationKYC = ({appLink, loader}) => {

  let [error, setError] = useState(null);
  let [homeAddress, setHomeAddress] = useState("");
  let [workAddress, setWorkAddress] = useState("");
  let [stateRegion, setStateRegion] = useState("");
  let [city, setCity] = useState("");
  let [loading, setLoader] = useState(false);

  useEffect(() => {
    if(window.sessionStorage.getItem("agreement") === "true" &&
      window.sessionStorage.getItem("token") !== null &&
      window.sessionStorage.getItem("email") !== null &&
      window.sessionStorage.getItem("country_code") !== null &&
      window.sessionStorage.getItem("firstName") !== null &&
      window.sessionStorage.getItem("lastName") !== null &&
      window.sessionStorage.getItem("userPhone") !== null &&
      window.sessionStorage.getItem("stateRegion") !== null &&
      window.sessionStorage.getItem("homeAddress") !== null &&
      window.sessionStorage.getItem("userCity") !== null &&
      window.sessionStorage.getItem("verified") !== null) {
        console.log("Redirecting ... 1");
        window.location.href=appLink.register_step_5_account;
        return;
    }

    if(window.sessionStorage.getItem("agreement") === null ||
      window.sessionStorage.getItem("token") === null ||
      window.sessionStorage.getItem("verified") === null ||
      window.sessionStorage.getItem("country_code") === null ||
      window.sessionStorage.getItem("firstName") === null ||
      window.sessionStorage.getItem("lastName") === null ||
      window.sessionStorage.getItem("userPhone") === null ||
      window.sessionStorage.getItem("email") === null) {
        window.sessionStorage.clear();
        console.log("Redirecting ... 2");
        window.location.href=appLink.register_user_agreement;
        return;
    }

    console.log("Redirecting ... 3");
  }, []);

  const updateKYC = (e) => {
    e.preventDefault();
    setLoader(true);

    if(homeAddress.length < 3) {
      setLoader(false);
      setError("Home address is not valid");
      return;
    }

    if(city.length < 2) {
      setLoader(false);
      setError("Phone number is not valid");
      return;
    }

    if(stateRegion.length < 2) {
      setLoader(false);
      setError("Phone number is not valid");
      return;
    }
    
    window.sessionStorage.setItem("stateRegion", stateRegion);
    window.sessionStorage.setItem("userCity", city);
    window.sessionStorage.setItem("homeAddress", homeAddress);
    window.sessionStorage.setItem("workAddress", workAddress);

    window.location.href=appLink.register_step_5_account;
  }

  return (
    <React.Fragment>

  {
    !loading ? (
      <form method="POST" onSubmit={updateKYC}>
        <div className="row">

          {
            error !== null && (
              <div className="col-12 mt-2 mb-2 text-center">
                <div className="alert alert-danger" role="alert">
                  {error}
                </div>
              </div>
            )
          }

          <div className="col-12 mb-2 mt-2">
            <div className="form-group mb-2">

                <label htmlFor="">
                  Home Address ( Address Line 1 )
                </label>

                <input className="form-control" type="text" onChange={(e) => setHomeAddress(e.target.value)} placeholder="Home Address" required={true}/>

              </div>
          </div>

          <div className="col-12 mb-2 mt-2">
            <div className="form-group mb-2">

                <label htmlFor="">
                  Work Address ( Address Line 2 )
                </label>

                <input className="form-control" type="text" onChange={(e) => setWorkAddress(e.target.value)} placeholder="Optional" />

              </div>
          </div>

          <div className="col-12 mb-2">
            <div className="form-group mb-2">

                <label htmlFor="">
                  State / Region
                </label>

                <input className="form-control" type="text" onChange={(e) => setStateRegion(e.target.value)} placeholder="Name of Country State / Region" required={true}/>

              </div>
          </div>

          <div className="col-12 mb-2">
            <div className="form-group mb-2">

                <label htmlFor="">
                  City / Town
                </label>

                <input className="form-control" type="text" onChange={(e) => setCity(e.target.value)} placeholder="Name of City within State / Region" required={true}/>

              </div>
          </div>

          <div className="col-12 mb-2">

              <button className="btn btn-block btn-primary" type="submit">
                Proceed <i className="fa fa-long-arrow-right"></i>
              </button>

          </div>

        </div>

      </form>
    ) : (
      <div className="col-12 mt-5 text-center">
        <img src={loader} width="70" height="70" alt="Loading"/>
      </div>
    )
  }

    </React.Fragment>
  );
}

export default LocationKYC;

/setup

 import React, {useState, useEffect} from 'react';
/* eslint-disable react-hooks/exhaustive-deps */

const UserAccount = ({appLink, loader}) => {

  let [error, setError] = useState(null);
  let [loading, setLoader] = useState(false);

  useEffect(() => {

    console.log("Set up running");
  }, []);

  return (
    <React.Fragment>

      {
        !loading ? (
          <form method="POST">
            <div className="row">
            {
                error !== null && (
                  <div className="col-12 mt-2 mb-2 text-center">
                    <div className="alert alert-danger" role="alert">
                      {error}
                    </div>
                  </div>
                )
              }
              <div className="col-12 mb-2">
                <div className="form-group mb-2">

                    <label htmlFor="">
                      Username
                    </label>

                    <input className="form-control" type="text" placeholder="Username" />

                  </div>
              </div>

              <div className="col-12 mb-2">
                <div className="form-group mb-2">

                    <label htmlFor="">
                      Password
                    </label>

                    <input className="form-control" type="text" placeholder="Password" />

                  </div>
              </div>

              <div className="col-12 mb-2">

                  <button className="btn btn-block btn-primary" type="button" >Complete Registration
                  <i className="ml-2 fa fa-check"></i></button>

              </div>

            </div>
        </form>
        ) : (
          <div className="col-12 mt-5 text-center">
            <img src={loader} width="70" height="70" alt="Loading"/>
          </div>
        )
      }
    </React.Fragment>
  );
}

export default UserAccount;

这是我的应用程序路由路径和路由代码 app_links.jsx

export default (
   {
    appRoot : "/",
    signIn : "/signIn",
    register_user_agreement: "/agreement",
    register_step_1_create: "/create",
    register_step_2_verify: "/verify",
    register_step_3_info: "/personal",
    register_step_4_location: "/location",
    register_step_5_account: "/setup",
    register_verify_email: "http://localhost:8080/misc/verify_email",
    register_verify_code: "http://localhost:8080/misc/verify_code",
    getCountries: "http://localhost:8080/misc/countries",
  }
);

路由浏览器 index.js

<React.StrictMode>
    <Router>
      <Switch>
      <Route exact path={appLinks.default.appRoot} component={App} />
      <Route exact path={appLinks.default.register_user_agreement} component={RenderAgreementPage} />
      <Route exact path={appLinks.default.register_step_1_create} component={RenderRegisterPage} />
      <Route exact path={appLinks.default.register_step_2_verify} component={RenderVerificationPage} />
      <Route exact path={appLinks.default.register_step_3_info} component={RenderPersonalInfo} />
      <Route exact path={appLinks.default.register_step_4_gh_location} component={RenderLocationInfo} />
      <Route exact path={appLinks.default.signIn} component={RenderUserSignIn} />
      <Route exact path={appLinks.default.register_step_5_account} component={RenderAccountConfiguraton} />
      </Switch>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')

提前谢谢你。

【问题讨论】：

嗨，欢迎来到 stackoverflow。请尝试更新您的问题，以包含您怀疑导致问题的组件的Minimal, Complete, and Reproducible 代码示例。
请添加@Reese

标签： reactjs react-hooks session-storage

【解决方案1】：

代码调试花了 1 多小时，也几乎破坏了我的浏览器 :D 。您在代码中打错字了。

您提到的位置路线是

<Route exact path={appLinks.default.register_step_4_gh_location} component={RenderLocationInfo} />

您在链接中添加了一个额外的 gh。

我删除并尝试过

    <Route exact path={appLinks.default.register_step_4_location} component={RenderLocationInfo} />

后来效果很好。我正在调试所有注册代码，但找不到任何错误。最后，我一一检查了你的 appLinks，发现 index.js 路由中的错字。

由于拼写错误，Route 路径为空，当应用程序在搜索匹配的路由时，由于该路由在设置之前出现，因此它一直在此处。

【讨论】：