full-stack-with-react-and-spring-boot
full-stack-with-react-and-spring-boot copied to clipboard
NEW APPROACH - Getting current URL params with functional components and TypeScript
Getting current URL params with functional components and TypeScript If anyone is doing this with TypeScript and functional components, the easiest way seems to be to import RouteComponentProps interface from react-router and use it as a type for props, together with your own defined prop type for the Welcome component:
import React from "react";
import { RouteComponentProps } from "react-router";
interface WelcomeProps { username: string; }
const Welcome = ({ match, }: RouteComponentProps<WelcomeProps>): React.ReactElement => { return
Welcome, {match.params.username}
; };export default Welcome; Props will then contain the match object with username.