How to extract a react router parameter?

I have a project where the only way to update the page is to write a value in the url (let's say it has to be that way). The value should get extracted and sent as a parameter in a rest call. I don't seem to find the way to set the route on App.js and manage to take out the url parameter.

My App.js:

function App() {
  useEffect(() => {
    getParam()
    //rest call code

  })
  return (   
    <BrowserRouter>
      <Route path="/:date"/>
        <Head />
        <div className="page-wrap">
          <Header className="header"/>
          <Main />
          <Footer className="footer"/>
        </div>
      
    </BrowserRouter>
  );
}

function getParam(){
    let {date} = useParams
    console.log(date)
    return({date})
}
export default App;

Solution

You can use useParams hook in a function component:

export default function Main() {
  let { date } = useParams();
  console.log("date from route: ", date)
  return <>I am Main Component</>
}

when you have router setup as:

export default function App() {
  return (
    <BrowserRouter>
    <Switch>
      <Redirect exact from="/" to="/some-date-here"/>
      <Route exact path="/:date">
        <Head />
        <div className="page-wrap">
          <Header className="header"/>
          <Main />
          <Footer className="footer"/>
        </div>
      </Route>
    </Switch>
    </BrowserRouter>
  )
}