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>
        );
    }

PostsRouter组件：

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

对于 / posts 和 / posts / 2 ，我需要组件 PostsPage 。让我们说我在 / home 。现在，我点击帖子链接和网址更改为 / 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

我怀疑谢尔盖的评论是正确的，这就是我的问题最终结果。我在componentDidMount()内提取数据，但没有意识到为了在点击下一页链接时使用新数据实际更新数据，我需要在componentWillReceiveProps()内执行相同的操作。您可以看到我的完整资源here，但最重要的部分是：

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

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

当您单击第2页的链接时，

componentWillReceiveProps()会收到新属性，包括页码，因此您需要在其中执行任何操作以使用新状态进行更新。

使用React Router v4.1进行分页问题

1 个答案: