在React应用程序中呈现组件之前刷新页面

在react class组件中，我遇到了与只刷新页面一次类似的问题。

我的应用程序中有几个页面，我使用BrowserRouter和useNavigate(反应路由器dom v6(在它们之间移动。其中一个页面有更大的div，当我回到主页面时，它的(main的(css会变乱(按钮位置改变，一些媒体文件从div中变长，悬停不显示(，直到我刷新页面(主页面(。我一刷新页面，一切都设置好了。我在上面的链接中使用了@rommyarb提供的代码片段。它工作，但有时间延迟(小于1秒，仍然可见(。这意味着，当我们导航回(navigation(-1((时，它首先呈现带有损坏css的主页面-->(0.2-0.5s(，然后刷新并恢复css。

时间延迟并不大，但仍然会给用户带来不愉快的体验。有没有办法先刷新页面(localhost/main(，然后用正确的css渲染组件。

任何帮助都将不胜感激！

代码：

function App() {
return (
<Router>
<Routes>
<Route exact path='/' element={<MainPage props ={props}/>} />
<Route path='/UnderConstruction' element={<UnderConstruction/>}/>
</Routes>
</Router>
)
}

function UnderConstruction(props) {
let navigate = useNavigate();
return (
<div className='UnderConstruction' style={somestyles}>
<h2>This page is under construction</h2>
<div style={somestyles}>
<img src={under_construction.jpg'} width="100%" height="60%" />
<Button style={somestyles} onClick={() => {
navigate(-1)
}}> Go Back</Button>
</div>
</div>
);