Passing Route path to the children element-CodePudding

<Route path="/pointandclick">
            <MyComponent />
          </Route>

For this piece of code, is there any way for my component to get the path of the Route that has been hit?

edit: to be more precise, let's say I want to know the string that has been hit (in this case /pointandclick) because in MyComponent I want to route between other paths, so I have to know if which path do I come from.

E.g.

<Route path="/pointandclick">
            <MyComponent />
          </Route>
<Route path="/draggablegame">
            <MyComponent />
          </Route>

and in my component I want to route on other components depending on the path. (example: if the Route that has been hit is pointandclick I want to render between game1, game2, game3 and if the Route is draggablegame I want to render between drag1, drag2, drag3 - so using the location hook might not be the best thing I think.

CodePudding user response：

You're looking for a simple javaścript's window.location.pathname.

CodePudding user response：

The useLocation hook returns the location object that represents the current URL. You can think about it like a useState that returns a new location whenever the URL changes.

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

function MyComponent() {
  let location = useLocation();
 console.log(location);
}

CodePudding user response：

With useLocation(), you can get the active route. It's a hook that returns the location object that contains information about the current URL. Whenever the URL changes, a new location object will be returned.

Demo: https://codesandbox.io/s/use-location-demo-7d3c3

Read on: https://www.kindacode.com/article/react-router-uselocation-hook-tutorial-and-examples/