Please see the full code on codesandbox.
I have two Route components for my countries api app-
<>
<Header/>
<Router>
<Switch>
<CountriesDataProvider>
<Route path='/' exact component={HomeRoute} />
<Route path='/detail/:countryName' component={DetailsRoute} />
</CountriesDataProvider>
</Switch>
</Router>
</>
The DetailsRoute
for each country shows up with all information perfectly when I click on a country on the HomeRoute
. But when a direct http request is made or the DetailsRoute
is refreshed, I see this error-
/src/comps/Details/DetailsRoute.jsx
Cannot read property 'borders' of undefined
It occurs on the line-
const promises = country[0].borders.map(fetchNeighborName);
country[0]
is extracted from countriesData
which seems to be undefined
-
const {countriesData} = React.useContext(CountriesDataContext);
This is not an issue with BrowserRouter
, because the DetailsRoute
component does render but with missing info.
I don't kow what logical error is causing it to not work when a direct url request is sent to the DetailsRoute
component? Please let me know the fix!