使用React Router v4.1的分頁問題

我正在將ASP.NET MVC中的網站遷移到REACT。爲了分頁，我在React中創建了一個組件。我正面臨的問題是使用分頁URL的路由。反應路由器是無法檢測，當我在一個分頁URL點擊
讓我解釋的URL是不同的：使用React Router v4.1的分頁問題

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

對於兩個/帖子和/帖子/ 2我需要的組件是帖子頁。可以說我在/首頁。現在我點擊帖子鏈接和網址更改爲/帖子。現在，如果我點擊/posts/2鏈接，則沒有任何反應。 React路由器不檢測URL是不同的。

而且我注意到一個奇怪的事情是，如果我改變組件：

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

隨即反應過來路由器的路由我StudiesPage組件，如果我在/職位/ 2鏈接點擊，當我在/帖子 URL。

可能是我失去了一些明顯的東西。但是經過多次嘗試，我一直無法想出辦法。

來源

2017-06-16 Boney

你有小提琴或git倉庫嗎？只是爲了展示更多的代碼？ – ickyrr

此代碼尚未添加到存儲庫。請告訴我你想看什麼。我可以在問題中添加它。 – Boney

試着檢查你'PostsPage'組件。可能它有'this.state'更新的問題。我的意思是它可能是更新，但獲得相同的內容。嘗試檢查出來。 – 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頁，所以你需要做什麼裏面就有用新狀態更新。

來源

2017-08-04 11:21:02 VirtualWolf

對不起，延遲迴復。很長一段時間，我一直在做不同的事情。你是對的。「componentWillReceiveProps（）」被調用，但我不知道，因爲我只有在「componentWillMount（）」我的代碼。非常感謝你的幫助。現在尋呼正在爲我工作。 – Boney

使用React Router v4.1的分頁問題

回答

相關問題