React-Router Link不會觸發組件刷新

Question

我正在嘗試構建我的react-redux-blog-system。 我想用路由器展示我的文章。 在索引路由器處，我們看到帶有標題（文章組件）的文章的列表視圖。 當我們單擊標題時，將顯示帶有注釋的指定帖子（位於“帖子”組件中）。

我的麻煩是當我單擊標題（來自react-router的鏈接）時，路由器不起作用（URL更改了，但內容沒有更改）。 但是，如果我用帖子URL刷新頁面，則顯示正確的頁面。

我相信路由器不能觸發頁面刷新本身是有原因的，如果您能幫助我解決問題，我將不勝感激。

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

這是我在內容組件中使用react router的核心代碼。 我在“路線組件”中使用了渲染功能。 數據綁定在父App組件中。

  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;

這是我的Post組件：

    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;

我的App組件是這樣寫的：

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

我對react-redux項目中使用的路由器不熟悉，該如何解決？

Answer 1

可能是拼寫錯誤-

更換

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

至

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