How to retrieve the last match object

[terrynguyen255]

Hello everybody,

Is there any way I could retrieve the last match ({path, url})?
I want to know which is the matched route (likes "/users/:userId/cart") of the last location, so I can know what is the matched page of the last location.

Thank you for your time

[hinok]

Hey @Nogias9x
It's not implemented at the moment. I don't see any issue with providing such feature.
PR is welcomed.

[terrynguyen255]

Thank you @hinok,
I will look into it and get back to you

[terrynguyen255]

HI @hinok ,
Is there any instruction how can I build and start onboarding this repo?

Thank you so much

[hinok]

@Nogias9x There is no written instruction at the moment but it's quite straightforward in my opinion.

1. Install packages, run

yarn

2. Start dev server, run

yarn start

3. Open http://localhost:8080/
4. If you change any file in src/ folder, the page under http://localhost:8080/ is automatically refreshed.
5. There are a few more tasks in package.json like

npm run test:watch

which is useful to write tests with watch mode.

[xaphod]

I'm not smart enough to know how to build this, but I want this too. I want to know which component this link came from, and it'd be easiest to look at the last route and pass that to useMatch... but it doesn't seem like you can tell useMatch to operate on something other than the current location?

[hinok]

@xaphod You can use matchPath that is used by useRouteMatch (source)

matchPath(lastLocation.pathname, path)

Demo: https://codesandbox.io/s/using-matchpath-with-lastlocation-urlvo

1. Go to Contact page
2. Go to About page
3. Look that with matchPath and lastLocation I render content conditionally when /contact route is matched. With parameterised routes it would be e.g. matchPath(lastLocation.pathname, '/blog/:slug')

Code

import * as React from "react";
import { matchPath } from "react-router-dom";
import {
  withLastLocation,
  WithLastLocationProps
} from "react-router-last-location";

const About: React.FC<WithLastLocationProps> = ({ lastLocation }) => (
  <div>
    <h1>About! {lastLocation && lastLocation.pathname}</h1>
    <h2>Your last location</h2>
    <pre>{JSON.stringify(lastLocation, undefined, 2)}</pre>

    <h2>Came from contact?</h2>
    <pre>
      {lastLocation && matchPath(lastLocation.pathname, "/contact")
        ? "Yes"
        : "No"}
    </pre>
  </div>
);

export default withLastLocation(About);

Unfortunately you have to pass a specific path so it may work in certain cases but universal usage described by @Nogias9x won't be possible.