Question

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

Answer 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'));

嵌套的React Router组件不会在页面重新加载时加载/渲染吗？

1 个答案: