CODEWITHSUNDEEP
reactjsreact-router
koque
koque

Reputation: 2256

Why is my react app not navigating to the page when I click the link?

In my navbar I have the following link:

<li className="list-inline-item">
    <Link to="/cart">
        <i className="fa fa-shopping-bag"></i>
    </Link>
</li>

In my App.js, I have the following routes:

<Provider store={store}>
    <Router>
      <Header />
      <Router>
        <Route exact path="/product-list/:productType" component={ProductList} />
        <Route exact path="/product/:id" component={Product} />
        <Route exact path="/cart" component={Cart} />
        <Route exact path="/" component={Home} />
      </Router>
      <Footer />
    </Router>
  </Provider>

When I click on the "/cart" link shown above, the url appears in the browser as shown below:

http://localhost:3000/cart

But the application does not navigate to the cart unless I manually refresh the browser then it navigates to the cart page. It should do so upon my pressing the link.

The other links work except this one.

Upvotes: 0

Views: 636

Answers (1)

femchaps
femchaps

Reputation: 41

You duplicated <Router>. You should only have one which is to be specified in the parent. Your App.js should be like this: (Remember to import {Switch} from react-router-dom):

<Provider store={store}>
        <Router>
          <Header />
          <Switch>
            <Route exact path="/product-list/:productType" component={ProductList} />
            <Route exact path="/product/:id" component={Product} />
            <Route exact path="/cart" component={Cart} />
            <Route exact path="/" component={Home} />
          </Switch>
          <Footer />
        </Router>
      </Provider>

Upvotes: 1

Related Questions