![](/img/trans.png)
[英]React Nested Router only change the url, but doesn't render the page
[英]Nested react router component doesn't load/render on page reload?
过去几周我一直在学习反应。 现在,我遇到了一个问题,当我使用浏览器重新加载按钮重新加载页面时,而不是重新加载组件,该组件只是消失了(并且是空白的。没有明显的错误抛出,但是即使是原本应该在其上呈现的组件也没有)该路由就会显示出来。)而其他页眉/页脚组件加载正常。 虽然在导航栏上的其他链接上设置了相同类型的内容,但重新加载工作正常。
[1]: https : //react---frontend.herokuapp.com/这是我的虚拟反应网站的链接。
在此页面上,我们可以看到一些帖子。 单击该帖子将使用户发布详细信息页面。
[2]: https : //react---frontend.herokuapp.com/post/ (此链接未直接加载,仅供参考)
现在,在此处插入特定于帖子的评论就可以正常工作,并且无需重新加载页面即可立即显示出来。 但是,当按下重新加载按钮时,帖子详细信息组件便消失了。
这是我的Index.js
ReactDOM.render(
<Provider store = {store} >
<BrowserRouter >
<PersistGate persistor={persistor}>
<App />
</PersistGate>
</BrowserRouter>
</Provider>,
document.getElementById('root'));
这是我的App.js
render(){
return (
<div className="App">
<Header />
<Navbar title = "React Blog" />
<Body />
<Footer />
</div>
);
}
这是我的body.js。 这些路由支持浏览器重新加载。
return (
<div>
<Router>
<Switch>
<Route exact path = "/" component = {PostIndex} />
<Route path = "/contact" component = {ContactIndex} />
<Route path = "/about" component = {AboutIndex} />
<Route path = "/auth" component = {AuthIndex} />
</Switch>
</Router>
</div>
);
这是postindex.js。 showpost组件是罪魁祸首。重新加载页面时不会加载。
return(//showpost should have been loaded when refreshed
<div>
<Router>
<Switch>
<Route path = "/" exact component = {Post} />
<Route path = "/post" component = {Showpost} />
</Switch>
</Router>
</div>
);
这是showpost.js
render() { //this page is no re-rendering when refreshed
const comment = this.props.post.comment.map(function(comment){
return <div key = {comment.id}>{comment.body}</div>
})
console.log(this.props.post)
return(
<div className='container'>
<div><h3>{this.props.post.title}</h3></div>
<div>{this.props.post.body}</div><hr/>
<h3><label>Comment</label></h3>
<CreateComment/>
<hr/>
{comment}
</div>
);
}
对于我用BrowserRouter包装的每个开关。 这是通常的方式吗? 至于状态我正在使用redux-persist。
以及如何使用URL直接加载https://react---frontend.herokuapp.com/post/id 。
您只需要在根目录中包含Router
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router} from 'react-router-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<Router>
<App />
</Router>
, document.getElementById('root'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.