CODEWITHSUNDEEP
javascriptreactjsreact-router
dfsdigging
dfsdigging

Reputation: 345

routing issue in reactjs where the matchUrl is coming from parent component

I am facing this issue in routing in react . One of the Component gets loaded on the screen and threre are various routes inside it .

Here is the code inside return in that component .

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

and on change of tab ,I am doing this .

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

But i don't see my standing component loading .The tab and the routing are in the same component . Here is another route inside same return which works fine .

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

where matchUrl is coming as props .

Upvotes: 0

Views: 34

Answers (2)

Sania Khushbakht Jamil
Sania Khushbakht Jamil

Reputation: 822

  1. Make sure isFetchingMatchDetail related condition is working fine.

  2. in react, the syntax is 

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

Upvotes: 1

ManavM
ManavM

Reputation: 3098

Try changing your Route's path to path={'/cricket/tournament/:matchId/standings'}

Upvotes: 0

Related Questions