Question

我正在尝试构建我的react-redux-blog-system。我想用路由器来显示我的文章。在索引路由器中，我们看到带有标题（文章组件）的文章的列表视图。当我们点击标题时，会显示带注释的指定帖子（位于帖子组件中）。

我的麻烦是当我点击标题（来自react-router的链接）时，路由器不起作用（网址已更改但内容未更改）。但如果我用post url刷新页面，它会显示正确的页面。

我相信有一个原因，路由器不会触发页面刷新本身，如果你能帮助我解决问题，我将非常感激。

我的项目网址是：https://github.com/liu599/BlogUpgrade。要测试它，我们需要在BackEnd文件夹中启动模拟服务器，然后在FrontEnd文件夹中启动前端部分。

这是我在内容组件中使用react路由器的核心代码。我在Route Component中使用了render函数。数据绑定在父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;

这是我的帖子组件：

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

我不熟悉react-redux项目中使用的路由器，如何解决这个问题？

Answer 1

这可能是拼写错误 -

替换

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

到

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

React-Router Link不会触发组件刷新

1 个答案: