Why is one of my nested react route not working?

C

Collins Orlando

Guest
I have a React view component that looks roughly like the one in the code below. The problem I have is the nested /:handle/saved route doesn't match the corresponding component and, thus, I'm redirected to the NotFound page.

I have nested routes in other pages of the app that work fine, so what am I missing here?

Below is the code corresponding to the page component.

import React, { Component } from 'react';
import { func, object } from 'prop-types';
import { NavLink, Route, Switch } from 'react-router-dom';
import { Grid, Icon } from 'semantic-ui-react';

function ProfilePage() {
return (
<Grid>
<Grid.Row className={row}>
<Grid.Column className={column}>
<NavLink
style={{ margin: '0 2rem 0 0' }}
className=https://stackoverflow.com/questions/58309645/why-is-one-of-my-nested-react-route-not-working
activeStyle={{ borderTop: '2px solid #333333' }}
to='/johndoe'
>
<Icon className={icon} name='grid layout' size='small' /> Posts
</NavLink>
<NavLink
style={{ margin: '0 0 0 2rem' }}
className=https://stackoverflow.com/questions/58309645/why-is-one-of-my-nested-react-route-not-working
activeStyle={{ borderTop: '2px solid #333333' }}
to='/johndoe/saved'
>
<Icon className={icon} name='bookmark outline' size='small' />{' '}
Saved
</NavLink>
</Grid.Column>
</Grid.Row>
<Grid.Row className={row}>
<Grid.Column className={column}>
<Switch>
<Route
exact
path='/:handle'
component={() => <div>I am Groot</div>}
/>
<Route
path='/:handle/saved'
component={() => <div>I am Groot: Saved</div>}
/>
</Switch>
</Grid.Column>
</Grid.Row>
</Grid>
);
}

export default ProfilePage;

Continue reading...
 
Top