Я учусь реагировать последние несколько недель.И теперь у меня есть проблема, что, когда я перезагружаю страницу с помощью кнопки перезагрузки браузера, вместо перезагрузки компонента, компонент просто исчезает (и остается пустым. Нет видимой ошибки, даже нет компонента, который должен отображаться наэтот маршрут обнаруживается.) в то время как другой компонент верхнего / нижнего колонтитула загружается нормально.В то время как тот же тип настроен на другой ссылке на панели навигации, перезагрузка работает нормально.[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.И как я могу https://react --- frontend.herokuapp.com/post/id загрузить напрямую с помощью URL.