Jiayee.net

My learning diary

Reach Router Match

#software #react #reach

I use Reach Router. I have a component which isn’t a child of Router, so it does not have the useLocation hook. But I need to access the current URL in that component. Here’s how I did it after seeing Jacek’s hint:

<div>
  <Match path="/*">
    {(props) => (
      <MyComponent
        path="/*"
        match={props.match ?? ''}
      />
    )}
  </Match>
  <Router>
    ...
  </Router>
</div>

interface Props {
  match: any;
}

export const MyComponent: FC<Props> = (props: Props) => {
  const pathname = props.match['*'];
  // Do your thing!
};

The official docs was really brief. I did a console.log(props.match) to see what’s actually being passed from Match to MyComponent and found that '*' was a key whose value is whatever that comes after the match.

For instance, if we have <Match path="/blah/*"> and the URL is actually /blah/a/long/path, then props.match['*'] is a/long/path.

There are other keys besides '*' but I don’t need them so it’s up to you to explore them yourself!

Relevant posts