Scroll bar does not load correctly when changing page with Reactjs

Asked

Viewed 62 times

0

I have a problem with an application in Reactjs, I am using the library React-router-dom to navigate between pages, and when switching pages in my application when the page component is too large and accurate have a scroll bar to navigate the page the bar does not appear, but if I give F5, give a Reload on the page, the bar appears again.

Apparently it’s nothing to do with CSS because when updating the page behaves normally.

Details:

  • Application was created with CRA (create-React-app)
  • As for the routes, I divided them into 3 files:

Routes.js

In this file I put all my routes (default of the React-router in any application | notice that I have a property called isAdminRoute and isPrivate)

import { Switch } from 'react-router-dom';
import Route from './Route';

<Switch>
      <Route path="/" exact isPrivate component={Index} />
      <Route path="/login" component={SignIn} />      
      <Route path="/admin/login" component={SignInAdmin} />
      <Route
        path="/admin"
        isAdminRoute
        component={Admin}
      />
      <Route path="/admin/resultado/:id" isAdminRoute component={Result} />
    </Switch>

Route component

I made an abstraction of the Route component of the React-router because I need some modifications regarding the permission to access the route or not (if the logged-in user is admin, or user according to the past properties)

export default function RouteWrapper({
  component: Component,
  isPrivate,
  isAdminRoute,
  ...rest
}) {
  const isSignedUser = auth.isUserAuthenticated();
  const isSignedAdmin = auth.isAdminAuthenticated();

  if (isPrivate && !isSignedUser) {
    return <Redirect to="/login" />;
  }

  if (isAdminRoute && !isSignedAdmin) {
    return <Redirect to="/admin/login" />;
  }

  return (
    <Route
      {...rest}
      render={(props) => (
        <DefaultLayout>
          <Component {...props} />
        </DefaultLayout>
      )}
    />
  );
}

In case I did kind of an abstraction to be able to verify if the user is administrator or normal user and at the end of everything if it is a valid user for this route, renders the component passing it as Children and ends up rendering the target component.

App.js

And my app.js which is the initial file of the entire React application (CRA) which I only cover all components and application routes

function App() {
  return (
    <AppProvider>
      <BrowserRouter>
        <ReactNotification />
        <Routes />
        <GlobalStyles />
      </BrowserRouter>
    </AppProvider>
  );
}
  • You have even modified body with css during the lifecycle of any of these components?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.