I have two urls
/soccer/teams
/soccer/teams/:team_id
In Teams.js I have a api call to get list of teams when mounted.
import React, { useEffect, useState } from 'react'
import { useSoccerStore } from '../../../zustand/store';
import api from '../../api/api';
import Skeleton from 'react-loading-skeleton';
import { NavLink, Outlet } from 'react-router-dom';
const Teams = () => {
const [teams, setTeams] = useState([]);
const currentSeason = useSoccerStore((state) => state.currentSeason);
const fetchTeamsData = async () => {
try {
const result = await api.get(`soccer/teams/${currentSeason?.season_id}`);
const teamdata = result.data?.data;
if (teamdata) {
setTeams(teamdata);
}
} catch (error) {
console.error(error);
}
};
useEffect(() => {
console.log('ParentComponent mounted');
fetchTeamsData();
}, []);
return (
<>
<div className="w-100 teams-section">
<div className="team-nav row">
{
teams.length <= 0
? <Skeleton count={1} height={50} className='mb-1'/>
: teams.map((item) => (
<div
className="col-lg-1 col-md-2 col-6"
key={item.id}
>
<NavLink
to={`${item.id}`}
>
<div className="team-nav-item" >
<img
src={item.team_logo_lg}
alt={item.team_official_name}
/>
</div>
</NavLink>
</div>
))
}
</div>
<div className="team-body">
<Outlet />
</div>
</div>
</>
)
}
export default Teams
In Team.js I have individual team data
import React from 'react'
import { useParams } from 'react-router-dom';
const Team = () => {
const { team_id } = useParams();
console.log(team_id);
return (
<h1>Team {team_id}</h1>
)
}
export default Team
The Problem:
When I go to /soccer/teams/1 url the teams list is also updating. I don’t want parent component to re render and hit that api. So that it only render child component.
{
path: "/soccer",
element: <Soccer />,
children: [
{
index: true,
element: <Navigate to="/soccer/standings" replace />,
},
{
path: 'standings',
element: <Standings />,
},
{
path: 'teams',
element: <Teams />,
children: [
{
path: ":team_id",
element: <Team />,
}
],
},
],
}
I tried implementing react-router-dom <Outlet/> so it doesn’t render parent component.
But it didn’t work