Question 244844 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Ionic Router: Subpage is only loaded after refreshing the page

I have a list page, where all games from my games.json file are displayed.

This is what that looks like in GameListPage.tsx:

<IonList>
  {gamesJson.map((game) => (
    <IonItem
      routerLink={
        game.software_used ?
          /games/id/${game.steam_appid}` : '/games'
      }
      key={game.steam_appid}
    >
      <IonThumbnail slot="start">
        <img alt={game.name} src={game.header_image} />
      </IonThumbnail>
      <IonLabel>
        <h2>{game.name}</h2>
        <p>{game.developer}</p>
      </IonLabel>
    </IonItem>
  ))}
</IonList>

When you click on the item, you are redirected to the game details page. However, you are only redirected after refreshing the page.

This is what my IonReactRouter looks like in App.tsx:

<IonReactRouter>
  <IonTabs>
    <IonRouterOutlet>
      <Route exact path="/games">
        <GameListPage />
      </Route>
      <Route path="/games/id/:id">
        <GameDetailsPage />
      </Route>
      <Route exact path="/software">
        <SoftwareListPage />
      </Route>
      <Route exact path="/">
        <Redirect to="/games" />
      </Route>
    </IonRouterOutlet>
    <IonTabBar slot="bottom">
      <IonTabButton tab="games" href="/games">
        <IonIcon aria-hidden="true" icon={triangle} />
        <IonLabel>Games</IonLabel>
      </IonTabButton>
      <IonTabButton tab="software" href="/software">
        <IonIcon aria-hidden="true" icon={ellipse} />
        <IonLabel>Software</IonLabel>
      </IonTabButton>
    </IonTabBar>
  </IonTabs>
</IonReactRouter>

How can I fix this issue so that the page is instantly loaded after clicking on the item in the list?

Tags:

2

Answers


  1. 0
    1. I think you need to use react-router-dom npm library
    2. then you need to use <Link> component with the (to) attribute <Link to={_link distination_}>{children}</Link>

    for example, it will be like this (indeed after you set your routers well)

    import {Link} from 'react-router-dom'
function MyComponent({game}){


return 

  <IonList>
    {gamesJson.map((game) => {
      const href = game.software_used ?`/games/id/${game.steam_appid}` : '/games'
  
      return 
       <Link to={href} key={game.steam_appid}>
          <IonItem>
             <IonThumbnail slot="start">
                 <img alt={game.name} src={game.header_image}/>
             </IonThumbnail>
             <IonLabel>
                 <h2>{game.name}</h2>
                 <p>{game.developer}</p>
             </IonLabel>
         </IonItem>      
      </Link>
  })}
                        
                   
</IonList>
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

    This way you will use the react routing and the page will not rerender.

    Login or Signup to reply.
  2. 0

    For what it’s worth I believe I once solved a similar issue by rendering the routes into the Switch component exported from react-router-dom. The IonContent component may or may not be needed in your case, but including it here as an example:

    import { Redirect, Route, Switch } from "react-router-dom";
import {
  IonContent,
  IonRouterOutlet,
  IonIcon,
  IonLabel,
  IonTabs,
  IonTabBar,
  IonTabButton,
  setupIonicReact,
} from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";

    <IonReactRouter>
  <IonTabs>
    <IonRouterOutlet>
      <IonContent>
        <Switch>
          <Route path="/games/id/:id" component={GameDetailsPage}  />
          <Route path="/games" component={GameListPage} />
          <Route path="/software" component={SoftwareListPage} />
          <Redirect to="/games" />
        </Switch>
      </IonContent>
    </IonRouterOutlet>
    <IonTabBar slot="bottom">
      <IonTabButton tab="games" href="/games">
        <IonIcon aria-hidden="true" icon={triangle} />
        <IonLabel>Games</IonLabel>
      </IonTabButton>
      <IonTabButton tab="software" href="/software">
        <IonIcon aria-hidden="true" icon={ellipse} />
        <IonLabel>Software</IonLabel>
      </IonTabButton>
    </IonTabBar>
  </IonTabs>
</IonReactRouter>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search