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

我正在迁移ASP.NET MVC中的一个站点以作出反应。对于分页，我在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);

从“React”导入React；
从“react dom”导入react dom；
从“redux”导入{createStore，applyMiddleware}；
从“../reducers/index”导入所有reducer；
从'react redux'导入{Provider}；
从“redux承诺”导入ReduxPromiseMiddleware；
从“react router dom”导入{BrowserRouter，Route}；
从“/Main”导入Main；
从“./Layout”导入布局；
const app=document.getElementById（'root'）；
const store=createStore（AllReducer、applyMiddleware（ReduxPromiseMiddleware））；
ReactDOM.render(
，app）；

主要组件渲染：

render(){

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

render（）{
返回(
);
}

后外部组件：

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

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

constpostsruter=（）=>(
);

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

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

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

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

到

然后，如果我在/posts URL上单击/posts/2链接，React路由器会将我路由到StudiesPage组件

---

也许我错过了一些明显的东西。但经过多次尝试后，我一直无法找到解决方法。

我怀疑谢尔盖的评论是正确的，这就是我的问题所在。我在

componentDidMount（）

中获取数据，但没有意识到，为了在单击下一页链接时用新数据实际更新数据，我需要在

componentWillReceiveProps（）中执行相同的操作。你可以看到我的完整资料来源，但最关键的部分是：

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

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

componentWillReceiveProps（）
在您单击第2页的链接时接收新属性，包括页码，因此您需要在其中执行任何操作以更新新状态。
您是否有fiddle或git存储库？只是为了显示更多的代码？这些代码还没有添加到存储库中。请告诉我你想看什么。我可以将其添加到问题中。尝试检查您的
PostsPage
组件。可能它在更新此.state时遇到了一些问题。我的意思是，它可能是更新，但得到相同的内容。试着检查一下。@Boney你有没有让它工作过？我正在做一些非常相似的事情，遇到了同样的问题@虚拟狼。很遗憾，我没有得到这个问题的解决方案。很抱歉，回复太晚了。很长一段时间以来，我一直在研究一种不同的东西。是的，你说得对。“componentWillReceiveProps（）”被调用，但我没有意识到，因为我的代码只在“componentWillMount（）”中。非常感谢你的帮助。分页现在对我很有效。在最新版本的react中，“componentWillReceiveProps”被弃用。您应该改用componentDidUpdate。也别忘了比较以前的道具和这个道具，否则它会进入无限循环。