1

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

User 101
  • 971
  • 2
  • 8
  • 16

1 Answers1

1

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>
Shubham Khatri
  • 211,155
  • 45
  • 305
  • 318
  • as you said I need to add `/servicePanel/fileManagerDashboard` and this `/servicePanel` at the same level, can I do that in app.js??? – User 101 Sep 25 '18 at 06:39
  • @User101 you can do that where you have written your Routes or depending on where exactly you want to render your Components. – Shubham Khatri Sep 25 '18 at 06:40
  • I have wriiten this `` in my app.js and I have written this ` ` in my ServicePanel.js. is there any way I can manage this in my `ServicePanel.js` – User 101 Sep 25 '18 at 06:42
  • In that case you must have `` in app.js, if you add it in ServicePanel, until ServicePanel is rendered, Dashboard cannot, so they won't be mutually exclusive of each other – Shubham Khatri Sep 25 '18 at 06:46
  • i added both my routes `` and `` in app.js and removed all routes from servicePanel.js just left the `...` there and now it is working.....is this fine or is there any better way to achieve this. – User 101 Sep 25 '18 at 06:53
  • The above mentioned way should be used when ServicePanel and Dashboard component need to be mutually exclusive of each other and is the right way. However in a case where you would want both of them to render, you could just remove the exact keyword from ServicePanel Route from your original question and it would work. – Shubham Khatri Sep 25 '18 at 06:55
  • You could check https://stackoverflow.com/questions/43994510/react-router-v4-renders-multiple-routes/43994605#43994605 and https://stackoverflow.com/questions/49921290/trying-to-go-back-to-in-react-router/49927990#49927990 for more details – Shubham Khatri Sep 25 '18 at 06:57
  • I wanted them to be mutually exclusive....if the route is `/servicePanel` just load the `ServicePanel.js` component and if the route is `/servicePanel/fileManagerDashboard` just load the `Dashboard.js` component only – User 101 Sep 25 '18 at 06:59
  • As I said, for your mentioned case, the above solution is how your handle it. – Shubham Khatri Sep 25 '18 at 07:00