React router not rendering path component

Question

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

Shubham Khatri · Accepted Answer · 2018-09-25 06:15:10Z

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>

answered Sep 25, 2018 at 6:15

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

User 101 Over a year ago

as you said I need to add /servicePanel/fileManagerDashboard and this /servicePanel at the same level, can I do that in app.js???

Shubham Khatri Over a year ago

@User101 you can do that where you have written your Routes or depending on where exactly you want to render your Components.

User 101 Over a year ago

I have wriiten this <PrivateRoute exact={true} path="/servicePanel" component={ServicePanel} /> in my app.js and I have written this ` <PrivateRoute path={${this.props.match.path}/fileManagerDashboard} component={Dashboard} />` in my ServicePanel.js. is there any way I can manage this in my ServicePanel.js

Shubham Khatri Over a year ago

In that case you must have <PrivateRoute path={`${this.props.match.path}/fileManagerDashboard`} component={Dashboard} /> 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

User 101 Over a year ago

i added both my routes <PrivateRoute path={'/servicePanel/fileManagerDashboard'} component={Dashboard} /> and <PrivateRoute path="/servicePanel" component={ServicePanel} /> in app.js and removed all routes from servicePanel.js just left the <Link>...</Link> there and now it is working.....is this fine or is there any better way to achieve this.

|

Collectives™ on Stack Overflow

React router not rendering path component

1 Answer 1

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Linked

Related