0

I have similar problem as in Refresh the page only once in react class component.

There are several pages in my application and I move between them using BrowserRouter and useNavigate (react-router-dom v6). One of pages has greater size div and when I go back to main page, it's(main's) css gets messed up(button position changes, some media file grows out of divs, hovers are not displayed) until I refresh page(main page). As soon as I refresh page, everything sets up well. I used code snippet provided by @rommyarb in the link above. It works, but there is time delay (less 1sec, still visible). Which means when we navigate back(navigate(-1)), it first renders mainpage with broken css --> (0.2-0.5s) then it refreshes and css is recovered.

Time delay is not big, but still it would be unpleasant user experience. Is there any way to first refresh page (localhost/main) then render component with proper css.

Any help would be appreciated!

Code:

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>

    );
Dastan Zhumazhanov
  • 21
  • 5
  • 1
    This might be an XY problem, the CSS *shouldn't* be getting "messed up" to begin with, so asking how to refresh the page to "fix" it probably isn't what you want in the long run. Can you edit your post to include all relevant code in a [mcve]? This includes the CSS as well as the components. – Drew Reese Aug 05 '22 at 07:36
  • I figured out root of the problem. I used makestyles from mui-styles, so className is assigned to corresponding styles. After debugging through dev tools, it is seen that when I come back to main page(useNavigate(-1)), those makestyles are not assigned to className => no styles are defined for elements. That's why css messes up, because properties are set to default. However, after refreshing page, makestyles styles are assigned and css is restored. Do you know why is it happening? PS: Didn't see notifications, so my reply is late. – Dastan Zhumazhanov Aug 08 '22 at 03:05
  • I see. Can you update your post to include a [mcve] that includes how and where you are using `makeStyles` and other CSS-related things? – Drew Reese Aug 08 '22 at 16:08

1 Answers1

0

I solved problem. The makeStyles return function(hook), when we call it within component, we can access only styles naming, which is string. So, every time we call a function, naming changes (makeStyles-element-number) due to global counter. I saved styles in state, which saved only string name. After re-rendering actual styles name was changed(makeStyles-element-number incremented) and the one I saved mismatched with actual styles. The simple solution was not storing makeStyles styles in state.

For more details read: Internal implementation of "makeStyles" in React Material-UI?

Dastan Zhumazhanov
  • 21
  • 5