reactjs - 几次导航后反应路由器dom白屏
问题描述
我正在做一个 ReactJS 项目。在这里,我面临一个问题react-router-dom
。几次导航后,我的屏幕变白了。
以下是我的 Router.js 文件:
// Routes.js
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Category from "./Category";
import ProductDetails from "./ProductDetails";
import Contact from "./Contact";
import Login from "./Login";
import Register from "./Register";
import Checkout from "./Checkout";
import Cart from "./Cart";
import Confirm from "./Confirm";
import Home from "./Home";
import UserDashboard from './UserDashboard';
const Routes = () => {
return (
<>
<Route path="/" exact component={Category} />
<Route path="/dash" exact component={UserDashboard} />
<Route path="/home" exact component={Home} />
<Route path="/product" exact component={ProductDetails} />
<Route path="/cart" exact component={Cart} />
<Route path="/checkout" exact component={Checkout}/>
<Route path="/confirm" exact component={Confirm}/>
<Route path="/login" exact component={Login} />
<Route path="/register" exact component={Register} />
<Route path="/contact" exact component={Contact} />
</>
)
}
export default Routes
以下是我的 App.js 文件:
// App.js
import React, { useEffect } from "react";
import "./App.css";
import { BrowserRouter as Router} from "react-router-dom";
import Routes from "./pages/Routes";
const App = () => {
return (
<Router>
<Routes />
</Router>
);
};
export default App;
类别部分的疑似代码:
// Category.js
import React, { useState, useEffect } from "react";
import Header from "../components/Header";
import BannerText from "../components/BannerText";
import Footer from "../components/Footer";
import Axios from "axios";
import ProductCard from "../components/ProductCard";
import { Link } from "react-router-dom";
const Category = () => {
const [next, setNext] = useState("");
const [prev, setPrev] = useState("");
const [pagdata, setPagdata] = useState([]);
const [purl, setPurl] = useState([]);
const [xurl, setXurl] = useState("http://192.168.43.34:8000/api/products/");
const [imgurl, setImgurl] = useState([]);
const [caturl, setCaturl] = useState(
"http://192.168.43.34:8000/api/categories/"
);
const [category, setCategory] = useState([]);
const [catsurl, setCatsurl] = useState([]);
// Products
useEffect(() => {
Axios.get(xurl).then((response) => {
console.log(response.data.previous + "from category");
return [
setPrev(response.data.previous),
setNext(response.data.next),
setPagdata(response.data.results),
setPurl(response.data.results.url),
];
});
// Browse Categories List
Axios.get(caturl).then((response) => {
console.log(response.data.results.children);
return [setCategory(response.data.results), console.log(category)];
});
// Sub Categories List
Axios.get(caturl).then((response) => {
console.log(response.data.results);
return [setCategory(response.data.results), console.log(category)];
});
}, [xurl]);
return (
<div>
<Header />
<BannerText title="Product List" />
<div className="container">
<div className="row">
<div className="col-xl-3 col-lg-4 col-md-5">
<div className="sidebar-categories">
<div className="head">Browse Categories</div>
<ul className="main-categories">
{category.map((category) => {
return (
<Link to={""}>
<li className="main-nav-list">
<a
data-toggle="collapse"
href="#fruitsVegetable"
aria-expanded="false"
aria-controls="fruitsVegetable"
>
<span className="lnr lnr-arrow-right"></span>
{category.breadcrumbs}
<span className="number">(53)</span>
</a>
</li>
</Link>
);
})}
</ul>
</div>
</div>
<div className="col-xl-9 col-lg-8 col-md-7">
{/* Start Filter Bar */}
<div className="filter-bar d-flex flex-wrap align-items-center">
<div className="sorting"></div>
<div className="sorting mr-auto">
<div className="head has-text-white">Browse Categories</div>
{/* <select>
<option value="1">Show 12</option>
<option value="1">Show 12</option>
<option value="1">Show 12</option>
</select> */}
</div>
<div className="pagination">
<a
href="#/"
className="prev-arrow"
onClick={() => setXurl(prev)}
>
<i className="fa fa-long-arrow-left" aria-hidden="true"></i>
</a>
{/* <a href="#/" className="prev-arrow" onClick={()=>{onClickLeft();}}><i className="fa fa-long-arrow-left" aria-hidden="true"></i></a> */}
<a href="#/"></a>
<a href="#/"></a>
<a href="#/"></a>
<a href="#/"></a>
{/* <a href="#/" className="next-arrow" onClick={()=>setXurl(next)}><i className="fa fa-long-arrow-right" aria-hidden="true"></i></a> */}
<a
href="#/"
className="next-arrow"
onClick={() => setXurl(next)}
>
<i className="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
{/* End Filter Bar */}
{/* Start Best Seller */}
{/* End Best Seller */}
<section className="lattest-product-area pb-40 category-list">
<div className="row">
{pagdata.map((pagdata) => {
return (
<ProductCard
title={pagdata.title}
realurl={purl}
imageurl={pagdata.url}
/>
);
})}
</div>
</section>
{/* Start Filter Bar */}
<div className="filter-bar d-flex flex-wrap align-items-center">
<div className="sorting mr-auto"></div>
<div className="pagination">
<a href="#/" className="prev-arrow">
<i className="fa fa-long-arrow-left" aria-hidden="true"></i>
</a>
<a href="#/"></a>
<a href="#/"></a>
<a href="#/"></a>
<a href="#/"></a>
<a href="#/" className="next-arrow">
<i className="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
{/* End Filter Bar */}
</div>
</div>
</div>
{/* <DealOf /> */}
<Footer />
</div>
);
};
export default Category;
当我尝试从“/”导航到任何其他路线时,我只会得到一个白屏。它有一些“精确”的方法。请让我知道为什么这种确切的方法会产生问题
解决方案
对于 ReactJS SPA(单页应用程序)上的路由,您应该使用的Link
组件,react-router-dom
但在您的代码中,我只看到您使用锚<a>
标记。有一个唯一的<Link>
标签,它的to
prop 是一个空字符串!注意这部分代码:
{category.map((category) => {
return (
<Link to={""}> // <== here!!!
实际上,您应该在此处传递其中一个路由名称,如下面的代码:
{category.map((category) => {
return (
<Link to="/dash"> // <== here!!!
再者,在 ReactJs 上要可爱,在 JSX 上不用返回,像上面这样写代码:
{category.map((category) => ( // <== return JSX like it
<Link to="/dash">
其他<a href="#/"
标签只是导致您的应用程序刷新,因此您的带有锚标签的内部路由的应用程序仍然不是 SPA。使用. Link
_react-router-dom
此外,Link
您的应用程序中的组件在一个map
函数下。所以你category
可能有相关的路线名称。另外,我建议您不要array.map
在函数中使用相同的名称及其项map
,如下所示:
category.map( item =>
我希望这些建议对你有所帮助。
推荐阅读
- python - Python用0填充数组而不用numpy
- xml - Muenchian Grouping - 通过不出现在 xml 结果中进行分组
- javascript - Javascript 最大 blob 大小检测
- progressive-web-apps - PWA 格式化本地存储
- wordpress - 为什么我的锚链接没有附加到涉及 WordPress 短代码的按钮上?
- validation - 无法使用 mysql 7 中的复杂检查约束案例验证数据
- java - 找到完美直角三角形的另外两个点
- python - 在 while 循环中使用计数器时 Turtle 模块崩溃
- python - 为什么我在类型注释上收到 SyntaxError?
- json - 使用 serde Rust 将数据从记录转置到没有中间结构的列