## UPDATE: Redirect user to intended page in React Router 6

use `navigate` hook `onClick={() => navigate("/login", { state: "/cart"})`

\
Here is an example:

```javascript
import { useNavigate } from "react-router-dom";

<button
  className="btn btn-outline-danger"
  onClick={() =>
    navigate("/login", {
      state: "/cart",
    })
  }
>
  Login to checkout
</button>
```

\
\
Here is the scenario:

* So you have a page that is protected for only logged in users.
* Your site visitor tries to access that page.
* You redirect them to login page
* No problem, the visitor login to your app
* Now at this point, this visitor surely expects to get redirected back the intended page which he was trying to visit right?
* But unfortunately, you redirect the user to a home page or user/dashboard page after login
* That's how you hard coded your app. After login you redirect them to certain page.
* You have no logic to redirect them to their previous/intended page after login
* This is not a very good user experience and for some app (for example ecommerce), it can be a disastrous too from UX (user experience) point of view
* Anyways that will not be the issue anymore. Because here i will show you how to can redirect user to their previous/intended page after login in react app using react router.

## Redirecting user to their previous/intended page

Here is a solution:

* In our app, let's say users list is public.
* You can click on users name, that will take you to view that user's profile.
* But you have to be logged in to view user's profile
* So you will redirect user(not logged in yet) to login page when he clicks on users name
* After login, it's our responsibility to redirect the user back to that page where he intend to go (user's profile, which he was trying to visit)

```js
// Users.js - A page that shows users name list (clickable)
<Link
  to={{
    pathname: "/login",
    state: { from: `/profile/${u._id}` },
  }}
>
  <h5 className="mt-0 mb-1">{u.name}</h5>
</Link>
```

```js
// Login.js
// after successful login response from backend
let intended = history.location.state;
// console.log("intended", intended);
if (intended) history.push(intended.from);
else history.push(`/profile/${res.data.user._id}`);
```

If for some reason, you app need to do hard page refresh on redirect. you can use the following code.

```js
if (intended) window.location.replace(intended.from); // with page refresh
```

There you have it. Now you can try clicking on any users name in user's list to view his profile. You will be redirected to login page.

Once login, user will get redirected back to his intended page.

Redirect back to intended page after login with react router 6

Fullstack JavaScript React Node Courses on Udemy