CODEWITHSUNDEEP
reactjsreact-routerreact-router-domreact-router-v4
user13266580
user13266580

Reputation:

history.push() does not updates browser's url

<div key={id} onClick={() => clicked(id)}>{name}</div>

In this clicked function is called.

const clicked = (id) => {
    history.push(`/user_dashboard/projects/${id}/designs`);
}

this is matched with the routes

<PrivateRoute path={match.url + '/:id/designs'} exact component={Designs} />

I have a route file with this route which opens dashboard with all the user projects

<PrivateRoute path='/user_dashboard/projects' exact component={Dashboard} />

In Dashboard it shows a toolbar with all the projects and if a user clicks any of the project it shows related designs corresponding to that project.

<Toolbar />
<PrivateRoute path={match.url} exact component={Projects} />
<PrivateRoute path={match.url + '/:id/designs'} exact component={Designs} />

I need to keep toolbar fixed in both the routes.What can I do? Let me know if you find any mistake.

Upvotes: 0

Views: 395

Answers (2)

Sai Krishna
Sai Krishna

Reputation: 657

You can use Link from react-router-dom instead of programmatically updating the URL.

<Link to={`/user_dashboard/projects/${id}/designs`} key={id}>{name}</Link>

this will handle the url for you, under the hood it's an anchor tag.

You can learn more about it here

Upvotes: 1

Victor Whyte
Victor Whyte

Reputation: 80

First error I can see is you are not using string interpolation for path property, so it should be 

path={`${match.url}/:id/designs`}

I think you need to provide more details for us to properly help you out on this issue.

Upvotes: 0

Related Questions