我在Reaction路由上遇到了一个非常奇怪和复杂的问题.我正在try 实现一个具有不同页面数量的单页面应用程序，该页面数量取决于json文件中的产品数量. 在我的应用程序中，我的主页面总是只有一个页面，因此它只有一个参数，称为:节.只有当我使用第二个参数:PAGE_NUMBER时，我才会遇到这个错误，所有其他页面都有这个参数.
这是我的主要组件，它包含各种页面，并取决于路由参数
import { Routes, Route } from 'react-router-dom';
import GoodsList from './GoodsList';
import Pages from './Pages';
function Sections() {
return (
<Routes>
<Route path='' element={<>
<div className="pageContent" data-main="true">
<p>Novelties</p>
<GoodsList goods="novelties" />
<p>Hot</p>
<GoodsList goods="hot" />
</div>
</>} />
<Route path='/:section/:page_number' element={<>
<div className='pageContent'>
<GoodsList />
<Pages />
</div>
</>} />
</Routes>
)
我用来在页面上导航的这个组件
import { Link } from 'react-router-dom';
function Menu() {
return (
<nav className='menu'>
<ul>
<li>
<Link to="">Main</Link>
</li>
<li>
<Link to="figures/1">Figures</Link>
</li>
<li>
<Link to="dakimakuras/1">Figures</Link>
</li>
<li>
<Link to="manga/1">Manga</Link>
</li>
<li>
<Link to="other/1">Other merch</Link>
</li>
</ul>
</nav>
)
}
最后，该组件显示产品列表
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchProducts } from '../redux/fetchDataReducer';
import { useParams } from 'react-router-dom';
function GoodsList(props) {
const params = useParams();
const goods = returnGoods();
function returnGoods() {
if (document.location.pathname == "/") {
return props.goods
}
return params.section
}
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchProducts());
}, [])
const products = useSelector(state => state.fetchDataReducer.products);
return (
<div className="list">
{products && products[goods].map((good, i) => (
<div className="productCard" key={i}>
<div className="productPicture">
<img src={good.pic} alt="ERROR" />
</div>
<p className="productName">{good.name}</p>
</div>
))}
</div>
)
}
问题是，当我点击导航栏中的主页，或者通过在地址栏中输入路径直接移动到主页时，它总是运行良好.然后，如果我点击导航栏中的任何部分，一切都运行得很好，但如果我try 刷新页面或通过直接在栏中键入地址来移动到除Main以外的任何页面，GoodsList组件将不会加载产品列表.数据的获取不会以某种方式发生，但是组件本身和地址栏中的所有参数都可以很好地加载.但是，如果我将再次移动到主页，然后通过使用导航链接移动到任何其他部分，它将再次加载正常，问题不会出现，直到我刷新页面.
因此，只有当我有:PAGE_NUMBER参数并且只影响我通过Redux从json文件接收的数据时，问题才会出现.如果我删除第二个参数，错误就不会发生.当我直接使用此参数移动到任何部分或刷新页面时，都会发生这种情况，如果我使用菜单栏上的导航链接，它工作得很好，但前提是我在此之前访问了主页.
UPD.添加Pages组件
import { useSelector } from "react-redux";
import { Link, useParams } from 'react-router-dom';
function Pages() {
const params = useParams();
const products = useSelector(state => state.fetchDataReducer.products);
const currentProduct = products ? products[params.section] : [];
const pageLinks = [];
let numberOfPages = () => {
if ((currentProduct.length / 8) % 1 == 0) {
return currentProduct.length / 8
}
else return Math.floor((currentProduct.length / 8) + 1)
}
for (let x = 1; x < (numberOfPages() + 1); x++) {
pageLinks.push(<Link to={`/${params.section}/${x}`} className="pageLink" key={x}>{x}</Link>);
}
return (
<div className="pageList">
{pageLinks}
</div>
)
}
