//route.js   
export default props => (
    <Router>
        <Switch>
          <Route  path='/page/index' component={ Frame } />        //for PC
          <Route  path='/mobile/index' component={ Mobile } />     //for mobile 
        </Switch>
    </Router>
  )


// js for PC page  Route: /page/index 
 
export default function Frame(props) {
      const classes = useStyles();


      useEffect(() =>{
        if(mobileDevice())
          window.location.href='/mobile/index';
      },[]);
        .....

this results in PC page will show to user first,and disappeared in a flash , I don't want the flashing page,it is not good for user experience . how to change the code ....

I have tried using useLayoutEffect, it also doesn't work .