full-stack-with-react-and-spring-boot icon indicating copy to clipboard operation
full-stack-with-react-and-spring-boot copied to clipboard

NEW APPROACH - Getting current URL params with functional components and TypeScript

Open in28minutes opened this issue 4 years ago • 0 comments

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.

in28minutes avatar Aug 04 '21 02:08 in28minutes