CODEWITHSUNDEEP
reactjsreact-router
User 101
User 101

Reputation: 1431

React router not rendering path component

I my app.js I have defined a route as:

<PrivateRoute exact={true} path="/servicePanel" component={ServicePanel} />

and in my ServicePanel.js I have a link as:

<Link to={`${this.props.match.url}/fileManagerDashboard`}>
    <i className="glyphicon glyphicon-cog"></i>
    File Manager
</Link>
<Switch>
    <PrivateRoute path={`${this.props.match.path}/fileManagerDashboard`} component={Dashboard} />
</Switch>

but the issue is that this /servicePanel/fileManagerDashboard path is not found when I set the prop `exact={true} in aboue path 

<PrivateRoute exact={true} path="/servicePanel" component={ServicePanel} />

and when I don't set exact={true} in the above path, /servicePanel/fileManagerDashboard renders both /servicePanel path component and below it /fileManagerDashboard path component on the same page

Upvotes: 1

Views: 279

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281626

Given that You don't want to render the ServicePanel component on /servicePanel/fileManagerDashboard, you need to refactor the Routes to add /servicePanel/fileManagerDashboard at the same level as /servicePanel

Your Routes would look like

<Switch>
      <PrivateRoute exact={true} path="/servicePanel" component={ServicePanel} />
      <PrivateRoute path={`${this.props.match.path}/fileManagerDashboard`} component={Dashboard} />
</Switch>

and ServicePanel component will contain just the link 

<Link to={`${this.props.match.url}/fileManagerDashboard`}>
    <i className="glyphicon glyphicon-cog"></i>
    File Manager
</Link>

Upvotes: 1

Related Questions