How to redirect to orginal route when i we are parameterized routing

  1. So First i have http://localhost:3000/#/users.html,
  2. this is the users list page and,when click on Edit user button
  3. it's redirect to http://localhost:3000/#/update-user.html/8
  4. this is update user page,now i have a sidebar there is userlist lable
  5. Now from sidebar if i click on that it's redirect to

http://localhost:3000/#/update-user.html/users.html

  1. But it needs to be redirect to original route

http://localhost:3000/#/users.html

This is App.js code:

class App extends Component {
  render() {
    return(
      <HashRouter>
        <ToastContainer></ToastContainer>
           <Route exact  path="/" component={Dashboard}/>
           <Route  path="/widgets.html/" component={Widgets}/>
           <Route  path="/users.html/" component={Users}/>
           <Route  path="/add-user.html/" component={Adduser}/>
           <Route  path="/update-user.html/:id" component={Updateuser}/>
           <Route  path="/delete-user.html/:id" component={Deleteuser}/>
      </HashRouter>
    )
  }
}

This is users.js code from where I am going to click on update user:

<tr key={user.id}>
    <td>{user.id}</td>
    <td>{user.first_name}</td>
    <td>{user.last_name}</td>
    <td>{user.user_email}</td>
    <td><NavLink to={`/update-user.html/${user.id}`} className="btn btn-primary">Edit User</NavLink></td>
    <td><NavLink to={`delete-user.html/${user.id}`} className="btn btn-danger">Delete User</NavLink></td>
</tr>

And this is the sidebar code:

<ul className="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
    
    <li className="nav-item">
    <NavLink exact to="/" className="nav-link">
        <p>Dashboard</p>
    </NavLink>
    </li>

    <li className="nav-item">
    <NavLink  to="widgets.html" className="nav-link">
        <p>Widgets</p>
    </NavLink>
    </li>
    <li className="nav-item">
        <NavLink to="users.html" className="nav-link">
            <p>Users List</p>
        </NavLink>
    </li>
</ul>

1 answer

  • answered 2020-08-09 15:52 kidney

    Looks like you are missing a '/' at the beginning of the to attribute in NavLink. The link should look like:

    <li className="nav-item">
       <NavLink to="/users.html" className="nav-link">
           <p>Users List</p>
       </NavLink>
    </li>