首页 文章

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

提问于
浏览 次
2

我'm migrating a site in ASP.NET MVC to REACT. And for pagination i have created a component in React. Issue i' m面向分页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 . 让我们说我在/家 . 现在，我点击帖子链接和URL更改为/ posts . 现在，如果我点击/发布/ 2链接，没有任何反应 . React Router未检测到URL不同 .

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

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

然后当我打开/发布URL时，如果我点击/ posts / 2链接，React Router会将我路由到StudiesPage组件 .

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

javascript reactjs pagination react-router

1 回答

  • 1

    我怀疑谢尔盖's comment was right, that' s我的问题最终结束了 . 我在 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() 会收到新属性，包括页码，因此您需要在其中执行任何操作以使用新状态进行更新 .

    回复于

相关问题