Having trouble extracting parameters with TypeScript in React Router even when they are present

Question

Having trouble extracting parameters with TypeScript in React Router even when they are present

I am in the process of migrating an older project to utilize react and react-router. Additionally, I am fairly new to typescript, which is the language used for this particular project. Any guidance or explanations on these topics would be highly beneficial.

The route is configured as follows:

<Route
   path="/deployments/:somePrefix/:someId"
   component={SomeDetailPage}/>

However, within SomeDetailPage, when attempting to access the parameters in order to execute a function on them (

(this.props.match.params.somePrefix

, or this.proper.match.params.someId)), the following error occurs:

ERROR in [at-loader] src/public/components/some-detail-page.tsx:25:97
    Property 'somePrefix' does not exist on type '{}'

ERROR in [at-loader] src/public/components/some-detail-page.tsx:25:97
    Property 'someId' does not exist on type '{}'

Despite knowing that these params do indeed exist, whenever attempting to test by incorporating them into a div element (just as a random test), the div fails to load and generates the subsequent error:

Objects are not valid as a React child (found: object with keys {somePrefix, someId})

typescript react-router

Answer 1

Answer №1

How do you properly type the Props for SomeDetailPage?

Ensure that you include the RouteComponentProps from react-router-dom.

Here is an example:

import * as React from 'react';
import { RouteComponentProps } from 'react-router-dom';

// Define the structure of your match
interface SomeDetailPageMatch {
    somePrefix: string;
    someId: string;
}

interface SomeDetailPagePropsFromParent {
    // Add your custom props here
}

type SomeDetailPageProps = SomeDetailPagePropsFromParent &
    RouteComponentProps<SomeDetailPageMatch>; // Use your match as a generic

class SomeDetailPage extends React.Component<SomeDetailPageProps> {

...

With this, you can access this.props.match.params.someId and

this.props.match.params.somePrefix

.

Answer 2

How do you properly type the Props for SomeDetailPage?

Ensure that you include the RouteComponentProps from react-router-dom.

Here is an example:

import * as React from 'react';
import { RouteComponentProps } from 'react-router-dom';

// Define the structure of your match
interface SomeDetailPageMatch {
    somePrefix: string;
    someId: string;
}

interface SomeDetailPagePropsFromParent {
    // Add your custom props here
}

type SomeDetailPageProps = SomeDetailPagePropsFromParent &
    RouteComponentProps<SomeDetailPageMatch>; // Use your match as a generic

class SomeDetailPage extends React.Component<SomeDetailPageProps> {

...

With this, you can access this.props.match.params.someId and

this.props.match.params.somePrefix

.

Having trouble extracting parameters with TypeScript in React Router even when they are present

Answer №1

Similar questions

Unable to utilize a generic model in mongoose due to the error: The argument 'x' is not compatible with the parameter type MongooseFilterQuery

Creating a regular expression to capture a numerical value enclosed by different characters:

Execute service operations simultaneously and set the results in the sequence they are received

Explanation of Default Export in TypeScript

How should I properly initialize my numeric variable in Vue.js 3?

What could be causing my NextAuthJS discord login to function in the test environment but fail to deploy in production on NextJS 13?

Are you harnessing the power of Ant Design's carousel next and previous pane methods with Typescript?

What is the reason behind the varying display of values?

The SpinButton object has an undefined public property called 'value' and the public method 'focus()' is not available

Sending real-time data from the tRPC stream API in OpenAI to the React client

invoke a specified function at runtime

Creating a unique optional string array interface in TypeScript

Change the view using React before scrolling to a specific element on the page

Search through the directory of images and generate a JSON representation

Hide the menu by clicking anywhere outside the React component

There is an error appearing in my .ts code: [ts] The property 'name' is not found in type 'any[]'

Guide on how to navigate to a different page upon logging in with react-router-dom V5

What is the reason for TypeScript not displaying a type mismatch error in this particular instance?

Create a debounced and chunked asynchronous queue system that utilizes streams

Tips for updating the font size of your MUI Accordion title