reactjs - React Route 陷入无限循环
问题描述
在调试我的代码中的无限反应路由器错误时，我非常需要您的帮助。我的网站在本地保存注册详细信息时使用 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')
先感谢您。
解决方案
代码花了 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 路径是空的，并且当应用程序正在搜索匹配的路由时，由于该路由在设置之前出现，因此它一直在此处。
推荐阅读
- blockchain - 使用 RPC 的 getValidator (NEAR)
- c# - 在 C# 中，如何将子类型与其父类型的引用进行比较？
- php - 定义变量全局和定期初始化之间的性能
- excel - 用于在 Lotus / IBM Notes 发送的电子邮件中插入文件链接的 VBA 代码
- c++ - 如何在不使用显式的情况下安全地允许单参数模板化构造函数？
- python - 如何获取在 Docker 容器中运行的 python 脚本的交互式用户输入？
- tensorflow - 第一个训练步骤后 Keras Nan 的准确性和损失
- javascript - 通过 Three.js 中的特定顶点更改对象的位置
- asp.net-core-3.1 - 在 ASP.NET Core 中跨平台 nuget HTML 到 PDF
- reactjs - 当我尝试在我的 onchange 处理程序上控制台登录时，为什么我无法获得正确的状态？