1

I have a parent container that has this route

const App = () => {
    return ( <
        ProtectedRoute exact path = {
            `/parent`
        }
        redirectTo = "/welcome"
        component = {
            ParentComp
        }
        />
    )
}

In parent Comp:

const ParentComp = (props) => ( <>
  <StaticStuff/>
  <ProtectedRoute exact path = {`/:id`}
        redirectTo = "/welcome"
        component = {
            childComponent
        } 
</>)

Then in parent component I render a static text and a child component in a child path

When I trigger Parent route route inside <StaticStuff> I also see the content of children Component. but What I'm trying to do is only show StaticStuffcomponent then when triggering /parent/DynamicParam then will see it under Static Stuff.

Here's the content of Protected Route 

const ProtectedRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => {
        return isAuthorized() ? <Component {...rest} {...props} /> :
            <Redirect to={{
                pathname: props.redirectTo,
                state: {
                    from: props.location
                }
            }} />
    }
    }>
    </Route>)
Hamza Haddad
  • 1,516
  • 6
  • 28
  • 48

1 Answers1

-1

So your ParentComp is displayed when the route equals /parent. Now you have a route inside the parent component with params (/:id) which obviously is also triggered by the route /parent with id=parent.

So either nest the route in the ParentComp (e.g. /parent/:id) or use a query parameter to display the child component conditionally.

j0nezz
  • 104
  • 4
  • Do you mean as I do it actually ? I'm nesting the child route in Parent – Hamza Haddad Dec 22 '20 at 15:08
  • No, only nesting Route Components does not automatically nest the path. You need to include the existing matching path `/parent` in the route. See an example here https://stackoverflow.com/a/43311025/10696402 – j0nezz Dec 22 '20 at 16:45