使用 React Router v4.1 的分页问题

Posted 2023-03-10

【中文标题】使用 React Router v4.1 的分页问题

【英文标题】：Pagination issue using React Router v4.1

【发布时间】：2017-11-18 22:40:02

【问题描述】：

我正在将 ASP.NET MVC 中的站点迁移到 REACT。对于分页，我在 React 中创建了一个组件。 我面临的问题是分页 URL 的路由。当我单击分页 URL 时，React Router 无法检测到 URL 不同 让我解释一下：

app.js 代码：

import React from 'react';
import ReactDOM from 'react-dom';
import createStore, applyMiddleware from 'redux';
import allReducers from '../reducers/index';
import Provider from 'react-redux';
import ReduxPromiseMiddleware from 'redux-promise';
import  BrowserRouter, Route  from 'react-router-dom';
import Main from './main';
import Layout from './layout';

const app = document.getElementById('root');
const store = createStore(allReducers, applyMiddleware(ReduxPromiseMiddleware));

ReactDOM.render(<Provider store=store>
                    <BrowserRouter>                    
                        <Layout>
                            <Main/>
                        </Layout>
                    </BrowserRouter>
                </Provider>
                ,app);

主组件渲染：

render()

        return(
            <main>
                <Switch>
                    <Route exact path='/' component=HomePage/>                    
                    <Route path='/posts' component=PostsRouter />                                        
                    <Route path='/studies' component=StudiesPage />
                </Switch>
            </main>
        );
    

PostsRou​​ter 组件：

const PostsRouter = () => (
    <Switch>
      <Route exact path='/posts' component=PostsPage />
      <Route path='/posts/:page' component=PostsPage />
    </Switch>
);

对于 /posts 和 /posts/2，我需要组件是 PostsPage。 假设我在 /home。现在我单击一个帖子链接并将 URL 更改为 /posts。现在，如果我点击 /posts/2 链接，什么也不会发生。 React Router 不会检测到 URL 不同。

我注意到一个奇怪的事情是，如果我更改组件：

<Route path='/posts/:page' component=PostsPage /> 
to 
<Route path='/posts/:page' component=StudiesPage />

如果我在 /posts URL 上单击 /posts/2 链接，那么 React Router 会将我路由到 StudiesPage 组件。

可能是我遗漏了一些明显的东西。但经过多次尝试，我一直无法找到方法。

【问题讨论】：

你有 fiddle 或 git 存储库吗？只是为了显示更多代码？

此代码尚未添加到存储库中。请告诉我你想看什么。我可以在问题中添加它。

尝试检查您的PostsPage 组件。 this.state 更新可能有问题。我的意思是它可能是更新但获得相同的内容。尝试检查一下。

@Boney 你有没有得到这个工作？我正在做一些非常相似的事情并且遇到了同样的问题！

@VirtualWolf。不幸的是，我没有解决这个问题。

【参考方案1】：

我怀疑 Sergey 的评论是正确的，这就是我的问题所在。我在componentDidMount() 中获取数据，但没有意识到为了在单击下一页链接时用新数据实际更新它，我需要在componentWillReceiveProps() 中做同样的事情。您可以查看我的完整源代码here，但最关键的部分是：

componentWillReceiveProps(nextProps) 
    this.setState(
        loaded: false
    );
    this.fetchMediaItems(nextProps.match.params.page);


componentDidMount() 
    this.fetchMediaItems(this.props.match.params.page);

componentWillReceiveProps() 在您单击第 2 页的链接时会收到新属性，包括页码，因此您需要在其中执行任何操作以更新新状态。

【讨论】：

抱歉回复晚了。很长一段时间以来，我一直在研究不同的东西。是的，你是对的。 “componentWillReceiveProps()”被调用，但我不知道，因为我的代码只在“componentWillMount()”中。非常感谢你的帮助。分页现在对我有用。

在最新版本的 react 中，“componentWillReceiveProps”已被弃用。您应该改用 componentDidUpdate。也不要忘记比较之前的道具和这个道具，否则它会无限循环。