javascript - Reactjs 中的路由问题，其中 matchUrl 来自父组件

Question

我在 react 路由中遇到这个问题。其中一个组件被加载到屏幕上，并且其中有不同的路由。

这是该组件中 return 内的代码。

   <Route
            path={`/cricket/tournament/${matchId}/standings`}
            render={routeProps =>
              isFetchingMatchDetail ? (
                <Loading />
              ) : (
                <Standings {...routeProps} tournamentId={tournamentId}
                  matchSummary={detailsData && detailsData.matchSummary} />
              )
            }
          />

在更改选项卡时，我正在这样做。

    const standingpath=`/cricket/tournament/${matchId}/standings`;
    this.props.history.push(standingpath);

但是我没有看到我的站立组件正在加载。选项卡和路由位于同一组件中。这是同一回程内的另一条路线，效果很好。

       <Route
            path={matUrl + "/scorecard"}
            render={routeProps =>
              isFetchingMatchDetail ? (
                <Loading />
              ) : (
                <Scorecard
                  {...routeProps}
                  matchId={matchId}
                  innings={innings}
                  matchInfo={matchInfo}
                  matchSummary={detailsData && detailsData.matchSummary}
                />
              )
            }
          />

其中 matchUrl 作为 props 出现。

Answer 1

1. 确保与 isFetchingMatchDetail 相关的条件正常工作。

2. 在react中，语法是

<Route
    path='/cricket/tournament/:matchId/standings'
    render={routeProps =>
    isFetchingMatchDetail ? (
        <Loading />
    ) : (
        <Standings 
          {...routeProps} 
          tournamentId={tournamentId}
          matchSummary={detailsData && detailsData.matchSummary} />
          )
        }
/>