CODEWITHSUNDEEP
javascriptreactjspaginationreact-router
Boney
Boney

Reputation: 2202

Pagination issue using React Router v4.1

I'm migrating a site in ASP.NET MVC to REACT. And for pagination i have created a component in React. Issue i'm facing is with Routing for the pagination URLs. React Router is not able to detect that the URL is different when i click on a pagination URL
Let me explain:

app.js code:

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

Main component render:

render(){

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

PostsRouter component:

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

For both /posts and /posts/2 i need the component to be PostsPage. Lets say i'm at /home. Now i click a posts link and URL changes to /posts. Now if i click /posts/2 link, nothing happens. React Router doesn't detect that the URL is different.

And a weird thing i noted is that if i change the component:

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

then React Router routes me to StudiesPage component if i click on /posts/2 link when i'm on /posts URL.

May be i'm missing something obvious. But i haven't been able to figure out a way after lots of attempts.

Upvotes: 3

Views: 5374

Answers (1)

VirtualWolf
VirtualWolf

Reputation: 723

I suspect Sergey's comment was right, that's what my problem ended up being. I was fetching data within componentDidMount() but didn't realise that in order to actually update it with new data when the next page link was clicked, I needed to do the same thing inside componentWillReceiveProps(). You can see my full source here but the biggest key part was this:

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

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

componentWillReceiveProps() receives the new properties, including page number, when you click on the link to page 2, so you need to do whatever inside there to update with the new state.

Upvotes: 2

Related Questions