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

Question

我正在将 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 组件。

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

Answer 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 页的链接时会收到新属性，包括页码，因此您需要在其中执行任何操作以更新新状态。