Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Url is changing but page is only appearing after reloading

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Onboarding from './components/Onboarding/Onboarding';
import Login from './components/Login/Login';

function App() {
  return (
    <Router>
      <div className="flex justify-center w-[386px] h-[800px] mb-6 mt-5 ml-[35%] box-sizing:border-box rounded-sm overflow-auto -z-50">
        <Switch>
          <Route  exact path="/"  component={Onboarding} />
          
          <Route path="/login"  component={Login} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

when i am cliking on a button which will redirect me to the login page , So after clicking it URL is changing but page is not appearing until i reload the page.

 const handleRedirectToLogin = () => {
    history.push('/login'); // Navigate to /login route using navigate
  };
<button className="progress-button absolute bottom-4 right-4" onClick={handleRedirectToLogin}>
       <span className="icon">→</span>
 </button
Tags:

2

Answers


  1. 0

    If you are using the history package for navigation and are encountering issues with React Router v5, it might be due to compatibility problems with the history package version. Specifically, if the URL changes but the Login component only appears after reloading, it might be related to a known issue with the history package version 5.x.

    Solution
    You should downgrade the history package to version 4.10.1 to resolve this issue

    Login or Signup to reply.
  2. 0

    This issue is because of the strict mode you can follow below steps for fixing it:

    1. Update your react-router-dom to [email protected].
    2. Now remove <React.StrictMode> from index file.
      Your render function should look like this.

    root.render(< App/>);

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search