React-Router Link不觸發組件新鮮

Question

我正在嘗試構建我的react-redux-blog-system。我想用路由器來顯示我的文章。在索引路由器中，我們看到帶有標題的文章的列表視圖（文章組件）。當我們點擊標題時，會顯示帶評論的指定帖子（在帖子組件中）。

我的問題是，當我點擊標題（鏈接從反應路由器）路由器不工作（URL更改，但內容不會改變）。但是，如果我用帖子url硬刷新頁面，它會顯示正確的頁面。

我相信有一個原因，路由器不會觸發頁面刷新自己，如果你能幫我解決問題，我將不勝感激。

我的項目網址是：https://github.com/liu599/BlogUpgrade。爲了測試它，我們需要在BackEnd文件夾中啓動模擬服務器，然後在FrontEnd文件夾中啓動前端部分。

這是我在內容組件中使用react路由器的核心代碼。我在路由組件中使用渲染功能。數據綁定在父應用程序組件中。

import React from 'react'; 
    import Article from '@/components/article/article'; 
    import Post from '@/components/post/post'; 
    import {Route} from 'react-router-dom'; 

    class NekoContent extends React.Component { 

    state = { 
     postData: this.props.nekoPosts 
    }; 

    listCreater =() => { 
     console.log(window.location); 
     return (
     <div> 
      { 
      this.state.postData.map((post) => { 
       return <Article key={post.id} content={post} /> 
      }) 
      } 
     </div> 
    ); 
    }; 

    postCreater = ({match}) => { 
     console.log(window.location); 
     let renderPost = this.state.postData.filter(function(post) { 
     return post.id === match.params.itemid; 
     }); 
     return (renderPost.length !== 0 ? 
      <Post content={renderPost[0]} /> 
      : <h2>Cannot find post</h2> 
     ); 
    }; 

    render() { 
     return (
     <div className="container"> 
      <ul className="list-wrapper"> 
      <li className="list-item"> 
       <div className="list-item-container"> 
       <Route path="/post/:itemid" render={this.postCreater} /> 
       <Route path="/" render={this.listCreater} /> 
       </div> 
      </li> 
      </ul> 
     </div> 
    ) 
    } 
    } 

    export default NekoContent; 

這裏是我的帖子組件：

import React from 'react'; 
    import Article from '@/components/article/article'; 
    import Comments from '@/components/comments/comments'; 

    class Post extends React.Component { 

     render() { 
     let {content} = this.props; 
     return (
      <div> 
      <Article content={content} /> 
      <Comments/> 
      </div> 
     ); 
     } 
    } 

    export default Post; 

我的應用組件是這樣寫的：

import React from 'react'; 
    import NekoHeader from '@/components/neko-header/neko-header'; 
    import NekoFooter from '@/components/neko-footer/neko-footer'; 
    import NekoContent from '@/components/neko-content/neko-content'; 
    import NekoSider from '@/components/neko-sider/neko-sider'; 
    import { connect } from 'react-redux'; 
    import '@/common/stylus/index.styl'; 
    import { Layout } from 'antd'; 
    const { Header, Footer, Content, Sider } = Layout; 

    class App extends React.Component { 
    render() { 
     return (
     <div> 
      <Layout> 
      <Header><NekoHeader /></Header> 
      <Layout> 
       <Content> 
       <NekoContent {...this.props} /> 
       </Content> 
       <Sider> 
       <NekoSider /> 
       </Sider> 
      </Layout> 
      <Footer> 
       <NekoFooter /> 
      </Footer> 
      </Layout> 
     </div> 
    ); 
    } 
    } 

    function mapStateToProps(state){ 
    return state; 
    } 

    // export default App; 
    export default connect(mapStateToProps)(App); 

而路由器是寫在index.js

import React from 'react'; 
    import ReactDOM from 'react-dom'; 
    import {BrowserRouter} from 'react-router-dom'; 
    import {Provider} from 'react-redux'; 
    import configureStore from './redux/store'; 
    import App from "./App"; 
    import {getData} from '@/api/posts'; 
    import * as CONFIG from '@/api/config'; 

    let initialState = { 
     nekoPosts: [{nekodata: '222'}, {nekodata: '333'}], 
     nekoComments: [{nekodata: 'qqq'}, {nekodata: 'eee'}] 
    }; 

    getData('posts').then((res) => { 
     if (res.status === CONFIG.STATUS_OK && res.statusText === CONFIG.TEXT_OK) { 
     // console.log(res.data); 
     initialState = { 
      nekoPosts: res.data, 
      nekoComments: [{nekodata: 'qqq'}, {nekodata: 'eee'}] 
     }; 
     } else { 
     throw res; 
     } 
    }).catch((res) => { 
     console.log(res); 
    }).then(() => { 
     let store = configureStore(initialState); 
     const supportsHistory = 'pushState' in window.history 
     ReactDOM.render(
     <Provider store={store}> 
      <BrowserRouter forceRefresh={!supportsHistory}> 
      <App /> 
      </BrowserRouter> 
     </Provider>, 
     document.getElementById('root') 
    ); 
    }); 

我對使用的路由器並不熟悉n react-redux項目，如何解決這個問題？

Answer 1

它可錯字錯 -

更換

import Pageination from '@/base/pagination/pagination'; 

到

import Pagination from '@/base/pagination/pagination';