Pass Object to a React Component using Link in Typescript

Question

I was wondering if it is possible to pass an object as a parameter to a react-router-dom endpoint using react-router-dom-v6. I've seen some ways of doing it with Hooks but they require functions instead of components.

This is the main component handling the Routes

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Home } from "./Home";
import { Page01 } from "./Page01";
import { Page02 } from "./Page02";

type TypeProps = { name:string }
type TypeState  = { }

class Main extends React.Component<TypeProps, TypeState> {

    constructor(props:TypeProps) {
        super(props);
        this.state = { };
    }

    render() {
        return (
            <div>
                <BrowserRouter>
                    <Routes>
                        <Route path="/" element={ <Home name="home"/> }/>
                        <Route path="/page01" element={ <Page01 name="page01"/> }/>
                        <Route path="/page02" element={ <Page02 name="page02"/> }/>
                    </Routes>
                </BrowserRouter>
            </div>
        );
    }

}

ReactDOM.render(<Main name="main" />, document.getElementById("main"));

Then a basic component which is only handling the Link to method.

import React from "react";
import ReactDOM from "react-dom";
import { Link } from "react-router-dom";

type TypeProps = { name:string }
type TypeState  = { }

class Page01 extends React.Component<TypeProps, TypeState> {

    constructor(props:TypeProps) {
        super(props);
        this.state = { };
    }

    render() {
        return (
            <div>
                <Link to={ "/page02" }>
                    <span>Go To Page 02</span>
                </Link>
            </div>
        );
    }

}

export { Page01 }

And then an almost identical component at the other end which will need to receive this data.

import React from "react";
import ReactDOM from "react-dom";
import { Link } from "react-router-dom";

type TypeProps = { name:string }
type TypeState  = { }

class Page02 extends React.Component<TypeProps, TypeState> {

    constructor(props:TypeProps) {
        super(props);
        this.state = { };
    }

    render() {
        return (
            <div>
                <Link to={ "/page01" }>
                    <span>Go To Page 01</span>
                </Link>
            </div>
        );
    }

}

export { Page02 }

I've tried to pass the data with state

let paramData = {
    field01:"data01",
    field02:"data02"
}

<Link to={ "/page02" } state={{ paramData:paramData }}>
    <span>Go To Page 02</span>
</Link>

But I cannot receive it on the other end because the I'm using a component and not a function

You'll need to either convert to a React function component so it can use the `useLocation` hook, or you will need to create a custom `withRouter` HOC to do this for you and pass the `location` object along as an injected prop to your class component. You can see my answer [here](https://stackoverflow.com/a/64566486/8690857) with details. It's not in Typescript, but typing it should be fairly trivial. — Drew Reese, Mar 03 '22 at 17:50

score 1 · Answer 1 · answered Mar 03 '22 at 12:04

1

React Router provide special props at Route component.

On props location you can get property state contain data from Link state

at constructor of Page02 you can get state with:

    constructor(props: TypeProps) {
        super(props);
        this.state = {};
        
        console.info(props);
        console.info(props.location);
        console.info(props.location.state);
    }

answered Mar 03 '22 at 12:04

GABORIEAU

61
3

I may be missing something here but when I `console.log(props)` it doesn't have the location property, only name as defined in the TypeProps – TheLovelySausage Mar 03 '22 at 12:09
1

You component `Page02` has been define inside `Router` ? – GABORIEAU Mar 03 '22 at 12:15
Yes it has, I will update the question to include that part – TheLovelySausage Mar 03 '22 at 12:15
Do you can show the version of `react-router-dom` you use please? – GABORIEAU Mar 03 '22 at 12:21
The exact version is `6.2.2` – TheLovelySausage Mar 03 '22 at 12:24

score 1 · Answer 2 · answered Mar 03 '22 at 12:31

Can attempt use lifecycle method componentWillReceiveProps

componentWillReceiveProps(nextProps) {
  console.log(nextProps);
  console.log(nextProps.location);
}

I think you route Page02 component has not good props type, react-router-dom export interface RouteComponentProps should be use with Route Component


import React from "react";
import ReactDOM from "react-dom";
import { Link, RouteComponentProps} from "react-router-dom";

type TypeProps = { name:string }
type TypeState  = { }

type Page02Props = RouteComponentProps<TypeProps>;

class Page02 extends React.Component<Page02Props, TypeState> {

    constructor(props:TypeProps) {
        super(props);
        this.state = { };

        console.log(props); // should be {location: [Object], match: [Object], history: [Object], name: string }
    }

    render() {
        return (
            <div>
                <Link to={ "/page01" }>
                    <span>Go To Page 01</span>
                </Link>
            </div>
        );
    }

}

export { Page02 }

I dont find official documentation for react-router-dom + typescript, but on a other topic can get special props with good type Route Component

The componentWillReceiveProps seems to be becoming redundant and the RouteComponentProps doesn't exist on react-router-dom. I really appreciate all of your help but I think the simplest solution is to just move over from Components to Functions — TheLovelySausage, Mar 03 '22 at 12:59

Pass Object to a React Component using Link in Typescript

2 Answers2