Pass Object to a React Component using Link in Typescript-CodePudding

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

CodePudding user response：

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);
    }

CodePudding user response：

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