嵌套反应路由器组件不会在页面重新加载时加载/渲染？
Posted
技术标签:
【中文标题】嵌套反应路由器组件不会在页面重新加载时加载/渲染？【英文标题】：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 开发中的每个人来说都应该是显而易见的——甚至不值得单独回答。
【参考方案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的快速设置中添加了通配符；仍然没有运气。组件不会在刷新时呈现..以上是关于嵌套反应路由器组件不会在页面重新加载时加载/渲染？的主要内容，如果未能解决你的问题，请参考以下文章
使用 React Router 重新加载 Webpack HotModule 渲染与组件