1
我正在尝试构建我的react-redux-blog-system。我想用路由器来显示我的文章。在索引路由器中,我们看到带有标题的文章的列表视图(文章组件)。当我们点击标题时,会显示带评论的指定帖子(在帖子组件中)。React-Router Link不触发组件新鲜
我的问题是,当我点击标题(链接从反应路由器)路由器不工作(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项目,如何解决这个问题?
感谢您的评论。我删除了这个组件。它仍然无法正常工作。 – eddie32
这不会提供问题的答案。要批评或要求作者澄清,请在其帖子下方留言。 - [来自评论](/ review/low-quality-posts/17187230) –