CODEWITHSUNDEEP
javascriptreactjsreact-router
Ayoob Nazeer
Ayoob Nazeer

Reputation: 9

Cannot go from child route to parent - ReactJS

I have a list of routes here which is a top navigation. When I click each item it goes to that route. Once I'm in a child route and clicked one of the top Navigation it adds the path from the route I have without clearing the route.

example

/api > from this route I can go anywhere

/api/id > but from here if I clicked /api Link to top nav it changes to /api/id/api

App.jsx

  <BrowserRouter>
  <div className="App">
    <Navigation />
    <Switch>

    <Route path="/apis" exact component={SwagUI}/>
    <Route path="/myaccount" exact component={MyAccount}/>
    <Route path="/myapps" exact component={MyApps}/>
    <Route path="/apis/:id" component={SwaggerAPI} />

    </Switch>

</div>    
  </BrowserRouter>

Navigation.jsx

    <ul class="navbar pull-right">
        <NavLink exact to="admindashboard"><li>Admin Dashboard</li></NavLink>
        <NavLink exact to="apis"><li>APIs</li></NavLink>
        <NavLink exact to="general"><li>General info</li></NavLink>
        <NavLink exact to="contactus"><li>Contact</li></NavLink>
        <NavLink exact to="myapps"><li>My Apps</li></NavLink>
        <NavLink exact to="faqs"><li>FAQs</li></NavLink>
        <NavLink exact to="notification"><li>Notifications</li></NavLink>
    </ul>

Upvotes: 0

Views: 27

Answers (1)

Kyle
Kyle

Reputation: 26

I think the NavLinks to attribute should begin with a slash to define it as a path rather than a sub route.

Not able to test right now to confirm tho.

Upvotes: 0

Related Questions