Is it possible to pass props from a React Link to a functional component?

Question

I have a sign up/sign on page, and I want to redirect the user to the last page that they visited on the site before they tried to sign up/sign on (or their profile if coming from another domain). My code basically looks like this:

Link that leads to the page

<Link to="/signup">Sign up</Link>

The page itself

export default function SignupPage(input){
       //code for signing in/up
}

My issue is that I am not sure how to pass the previous pathname to SignupPage. Link seems to pass in its own predetermined data, and I have considered using the goBack function but then I wouldn't be able to redirect to the profile if the user is coming from a different domain. Is there any way to do with without changing the SignupPage to a class? Was thinking there might be a way with hooks but I'm not sure.

Answer 1

You can pass state with the link:

<Link
  to={
    pathname: "/signup",
    state: {
      referrer: history.location, // save the current location and pass with route push
    }
  }
>
  Sign up
</Link>

Then in the component unpack the location state from the history object:

• if passed as rendered prop const referrer = props.history.location.state.referrer;
• using hook if nested const { location: { state: { referrer } } = useHistory();

Then render the Redirect or history.replace to redirect user back to where they came from

• <Redirect to={referrer} />
• history.replace({ pathname: referrer });

I create a utility function to process and return a referrer from the history object.

const getReferrer = history =>
  (history.location &&
    history.location.state &&
    history.location.state.referrer) ||
  '/'; // return home if no referrer

Answer 2

The standard way to do this is to use a query parameter to capture the intended destination of your user before you redirected them to the login page, so that you can then send them to their intended destination after they've signed on.

If you're using react-router, you can get the current location from the history object, which can be obtained via a Hook, or an HOC. If you're using a different routing library, it will probably have documentation for getting the history.

Usually, this is done with a <Redirect to={signUpPath}/>, but you could apply this same concept to a <Link ...> as well.

Grab the desired location from the history or window object, and build your link to look something like this:

const redirectPath = ...;  //capture/build the path of where to return the user to
<Link to={"/signup?redirectTo={redirectPath}"}>Sign up</Link>

In your sign up page, you would then grab the redirectTo query parameter from the currently url (via history.location.search if you're using react-router):

//getReturnUrl would just pull the url from the search string.  you could also use window.location
const destination = getReturnUrl(history.location.search);
history.replace(destination);

and then send the user there after they've signed on. If there's no redirect path, then they probably didn't originate from your app, so just send them to the default view.

Note: using history.replace() rather than the more common history.push() keeps the sign up page from showing in the user's back stack.

Answer 3

Link Button

<Link to="cityPage" state={{ city: "Paris" }}>
    Go City Page
</Link>

Functional Component

import { useLocation } from 'react-router-dom'

function CityPage () {
  const location = useLocation()
  const { city } = location.state

  return (
    <div>
         City is {city} 
    </div>
  )

Output : City is Paris