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

我有一个列表页面，其中显示了我的games.json文件中的所有游戏。

This is what that looks like in GameListPage.tsx:

这是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在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?

如何修复此问题，以便在单击列表中的项目后立即加载页面？

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.

这样，您将使用Reaction路由，页面将不会重新呈现。

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:

无论如何，我相信我曾经解决过一个类似的问题，通过将路由呈现到从act-router-dom导出的Switch组件中。IonContent组件在您的案例中可能需要，也可能不需要，但将其作为示例包括在内：

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>