Page not reloading

Hello all

I have a list of items. when i click on an IonItem, the url in the browser changes but the new page does not load.

When i refresh (after clicking), the correct page does load (because the url in the browser search bar did change).

                <IonList>
                    {recipes.map((entry) =>
                    <IonItem button key={entry.id}
                    routerLink={`/my/recipes/view/${entry.id}`}>
                        {entry.title}
                    </IonItem>)}
                </IonList>

image
In the image you can see the ‘all recipes page’ after i clicked a recipe. The page still shows the ‘all recipes page’ but the url has changed to the detail page.

Anyone knows why this happens?

How did you define your route in the router for /my/recipes/view/id?

This is my router for all paths under /my/

            <IonRouterOutlet>
              <Route exact path="/my/home">
                <Home />
              </Route>
              <Route exact path="/my/favorite-recipes">
                <Favorites />
              </Route>
              <Route path="/my/recipes">
                <AllRecipes />
              </Route>
              <Route path="/my/recipes/view/:id">
                <RecipePage />
              </Route>
              <Route path="/my/your-recipes">
                    <YourRecipes />
              </Route>
              <Route path="/my/profile">
                <Profile/>
              </Route>
            </IonRouterOutlet>

Is <AllRecipes> an <IonPage>? If so, try replacing this:

with this:

              <Route path="/my/recipes/view/:id">
                <RecipePage />
              </Route>
              <Route path="/my/recipes">
                <AllRecipes />
              </Route>

Or using exact for the <AllRecipes> route.

The reason is that with the current router, your /my/recipes/view/:id routes will be matching <AllRecipes>.

ill do that.

I just changed my IonList to IonCards with routerlinks and that fixed it actually!

1 Like