嵌套反应路由器组件不会在页面重新加载时加载/渲染？答案

【问题标题】：Nested react router component doesn't load/render on page reload?嵌套反应路由器组件不会在页面重新加载时加载/渲染？
【发布时间】：2019-10-21 07:56:38
【问题描述】：

过去几周我一直在学习反应。现在我遇到了一个问题，当我使用浏览器重新加载按钮重新加载页面时，而不是重新加载组件，组件就会消失（并且是空白的。没有明显抛出错误，但甚至没有应该呈现的组件该路线显示出来。）而其他页眉/页脚组件加载正常。虽然在导航栏上的其他链接上设置了相同的类型，但重新加载工作正常。
[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加载。

【问题讨论】：

facebook.github.io/create-react-app/docs/deployment
这个问题与部署无关，本地环境也存在
这一切都与此有关...您是否仔细阅读了this section？你知道在 f.e. 中有一个index.php 吗？ WordPress 可以提供多个网址？虚拟路由问题对于 Web 开发中的每个人来说都应该是显而易见的——甚至不值得单独回答。

标签： javascript reactjs redux react-router

【解决方案1】：

你只需要在根目录下用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'));

【讨论】：

我试过了，但是那个 postindex.js 不会加载任何组件。
你有 github repo 链接还是codesandbox？一起看所有东西对我有帮助
你能解决这个问题吗？我在尝试从 HashRouter 切换到 BrowserRouter 时遇到了同样的问题。我做了上述，更新了historyApiFallback，在我的index.html的快速设置中添加了通配符；仍然没有运气。组件不会在刷新时呈现..