过去几周我一直在学习 React。现在我遇到一个问题，当我使用浏览器重新加载按钮重新加载页面时，该组件没有重新加载组件，而是消失了(并且是空白的。没有明显抛出错误，但甚至没有应该渲染的组件该路线显示。)而其他页眉/页脚组件加载正常。虽然在导航栏上的其他链接上设置了相同的类型，但重新加载工作正常。
[1]:https://react---frontend.herokuapp.com/这是我的虚拟 react 网站的链接。
在此页面中我们可以看到一些帖子。单击帖子会将用户带到帖子详细信息页面。
[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。
我怎样才能制作https://react---frontend.herokuapp.com/post/id
直接使用url加载。
最佳答案
只需要在根目录下用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'));
关于javascript - 嵌套 react 路由器组件在页面重新加载时不会加载/渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56466704/