In my react app, url updates but the page does not redirect until browser refresh

Question

I need Help. Can someone please let me know what is the prople here, whenever i press button on side navigation that is 'Routes" the page address in url changes but the page does not load until i refresh from browser. I did whatever i can. Also my serviceworker registration is also working i guess no error in that. what am i doing wrong? can anyone help with this.

this is my code of routing pages. index.js

import swConfig from '../swConfig'
import * as serviceWorker from '../serviceWorker';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
    ReactDOM.render(

   <Router>

    <Switch>
     <Route exact path="/" component={Login} />
     <Route component={Loading}/>
    </Switch>

   </Router>,
   document.getElementById('root')
   );
   serviceWorker.register(swConfig);

`

Loading.js

export default class Loading extends React.Component {
constructor(props) {
    super(props);
    this.state = {
      user: null
    };
  }
componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
        if (user) {
            this.setState({user})
          }
    });
}

render() {
    return (
        <div >
        {this.state.user ?
        <App/> :
        <Login/>}
        </div>

    );
}

}

App.js

    <div className="flexible-content">
      <TopNavigation />
      <SideNavigation />
      <main id="content" className="p-5">
        <Routes />
      </main>
    </div>

Routes

  <Router>
      <div>
      <Switch>
         <Route exact path='/DashboardPage' component={DashboardPage} />
         <Route path='/StudentRecord' component={StudentRecord}/>
         <Route path='/VendorReg' component={VendorReg}/>
         <Route path='/VendorRec' component={VendorRecord}/>
         <Route path='/Edit/:id' component={Edit} />
        <Route path='/SpecificTransaction/:id' component={SpecificTransaction}/>
        <Route path='/create' component={create} />
        <Route path='/Show/:id' component={Show} />
        <Route path='/Transaction' component={Transaction} />
        <Route path='/Topup/:id' component={Topup} />
        <Route path='/Vendor' component={Vendor} />
        <Route path='/Payment' component={Payment} />
        <Route path='/pay/:id' component={pay} />
       </Switch>
     </div>
  </Router>

score 0 · Answer 1 · answered May 07 '20 at 03:14

0

try this:

render() {
    return (
        <div >
        {this.state.user ?
        <Redirect to="/app" /> :
        <Redirect to="/login" />}
        </div>

    );
}

answered May 07 '20 at 03:14

Maximiliano Poggio

1,067
10
23

I'm having error in the "Roues" where different pages are availaible, Dashboard, StudentRecord etc – Ayesha Khalid May 07 '20 at 03:20

Ajeet Shah · Answer 2 · 2020-05-07T18:31:38.550

You don't need Router again in your component which applies nested routing. So, here is how your Routes component should look like:

Routes.jsx (or .tsx) file:

{/* <Router> : NOT NEEDED */}
<div>
  <Switch>
    {/* You can keep or remove "exact" form all these routes */}
    <Route exact path="/DashboardPage" component={DashboardPage} />
    <Route exact path="/StudentRecord" component={StudentRecord} />
  </Switch>
</div>
{/* </Router> */}

I just copied two routes, you can add your rest of the routes. Using exact is a different topic.

The problem in your code was that you were using an extra Router unnecessarily. I hope, it works for you!

In my react app, url updates but the page does not redirect until browser refresh

2 Answers2