CODEWITHSUNDEEP
javascriptreactjsreact-router
wyndham007
wyndham007

Reputation: 181

React- page won't refresh

My current situation:

I want to click on an image and then navigate to a /details page. If I click on the image, the url gets refreshed but my component is not loaded.

I tried some solutions I found like window.location.reload(). This approach works, but I have to click 2 times on the image to refresh the page and I don't understand why? So it doesn't solve my problem.

I found out that if I insert the Link, whether it is an image or a button, into the navbar the link works fine and the page gets refreshed. Only if I insert the Link into a page, it dont works.

Maybe it's because the Navbar component is outside the Switch component? (see below) That's the only difference. Maybe someone of you has an idea.

<React.Fragment>
        <Navbar />
        <Switch>
          <Router exact path="/">
            <ProductList />
          </Router>

          <Router path="/details">
            <Details />
          </Router>

          <Router path="/cart">
            <Cart />
          </Router>

          <Router>
            <Default />
          </Router>
        </Switch>
      </React.Fragment>

Upvotes: 0

Views: 611

Answers (1)

maten
maten

Reputation: 586

You need only one Router component (which should be outside the Switch), and for the separate routes you should use Route.

Upvotes: 3

Related Questions