CODEWITHSUNDEEP
reactjsreact-router
nishant
nishant

Reputation: 117

React router not getting refreshed after routing

i have an app.js wherein i call Home.js via routing , Home.js consists of two other components called Service and List such that when Service is clicked it goes to List. I have another route wherein when i click any content in List , it should go to new component DisplayData but it is going to Home.js , and i have to manually refresh the page for the contents of DisplayData to be rendered .App.js

 App.js 
 <Router>
  <div className="App">
    <Link to="/services"><button className="btn btn-primary m-3">Services</button></Link>
    <Route path="/services" exact component={Home}/>
    <Route path="/service/:service_name/requests" exact component={DisplayData}/>
  </div>
  </Router>

 Home.js
 const Home = () => {
 return(
 <Router>
 <div className="main-wrapper">
  <div className="service-wrapper">
    <Service/>
  </div>
  <div className="list-wrapper">
    <Route path="/service/:service_name" exact component={List}/>
  </div>
 </div>
 </Router>
 );
}

Upvotes: 1

Views: 82

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 282120

You should only have a single Router instance in your App. Also you should remove exact keyword from /service path and use Switch with Route path reordering otherwise the nested Routes within Home won't be re-rendered

App.js 

 <Router>
  <div className="App">
    <Link to="/services"><button className="btn btn-primary m-3">Services</button></Link>
    <Switch>
        <Route path="/service/:service_name/requests" exact component={DisplayData}/>
        <Route path="/services" component={Home}/>
    <Switch>
  </div>
</Router>

Home.js

 const Home = () => {
    return(
         <div className="main-wrapper">
          <div className="service-wrapper">
            <Route component={Service}/>
          </div>
          <div className="list-wrapper">
            <Route path="/service/:service_name" exact component={List}/>
          </div>
        </div>
     );
}

Upvotes: 1

Related Questions