[英]React-Router Link does not trigger the component freshing
我正在尝试构建我的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项目中使用的路由器不熟悉,该如何解决?
可能是拼写错误-
更换
import Pageination from '@/base/pagination/pagination';
至
import Pagination from '@/base/pagination/pagination';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.