React + TS - pass parameters with redirect

Question

Hello i have application where i want to redirect user after successfully create a new room. I want to redirect him to page with room ID in URL, but i want to send data with this redirect to the component state.

in App.tsx i have

<Route path="/game/lobby/:id" component={LobbyView} />

im redirect from CreateRoom component like this

if(this.state.redirect) {
        return <Redirect to={{
            pathname: "/game/lobby/" + this.state.roomId,
            state: { ownerName: this.state.roomOwnerName }
        }}/>
    }

that works fine and redirect me. this is code of LobbyView

    import React, { Component } from 'react';
    import {BrowserRouter as Router, Route, Link, match} from 'react-router-dom';

    interface DetailParams {
        id: string;
    }

    interface Props {
        required: string;
        match?: match<DetailParams>;
        ownerName?: string;
    }

    interface State {
        roomId?: string;
        ownerName?: string;
    }

    class LobbyView extends Component<Props, State> {

    constructor(props: Props) {
        super(props);

        this.state = {
            roomId: this.props.match?.params.id,
            ownerName: this.props.ownerName
        };
    }

    public render() {
        if(this.state.ownerName) {
            return (
                <div>
                    <h1>{this.props.match?.params.id}</h1>
                    <strong>You are owner of this room.</strong>
                </div>
            );
        }else {
            return (
                <h1>{this.props.match?.params.id}</h1>
            );
        }
    }
   }
   export default LobbyView;

but there is the main problem, it redirect me, but always without state parameter ownerName..

the point is: Creator of room will be redirected to the URL to show room info with additional info for owner, if he share this link to other users, they will have ownerName empty and they cant view additional info.

Can someone please help me? Im new in react and typescript and i dont know how to do it.. Thank you so much :)

This is most probably happening because you're trying to derive your state from the props - there used to be a React component lifecycle `componentWillReceiveProps` not sure if that's still available. I would recommend reading the answer here : https://stackoverflow.com/questions/40063468/react-component-initialize-state-from-props — Ayushya, Mar 20 '21 at 18:18

Ajeet Shah · Accepted Answer · 2021-03-20T18:53:18.990

Location state data would be available in location.state:

this.props.location.state?.ownerName
// OR
this.props.history.location.state?.ownerName

So, you can do:

if(this.props.location.state?.ownerName) {
  ..
}

See this history object.

And there is no need to copy data from "props" or "location state" (your case) to "component state" unless you have a good reason to do so.

And here is how to fix Typings of the component props (combine it with RouteProps provided by react-router-dom):

import { RouteComponentProps } from "react-router-dom";

interface Params {
  id: string;
}

interface LocationState {
  ownerName: string;
}

// Static Context is available when you use Static Router*
interface SC {
  statusCode?: number;
}

class LobbyView extends Component<Props & RouteComponentProps<Params, SC, LocationState>, State>

*Static Router

Ehh, i cant use location because this is undefined property. Probably Typescript validation. thats the problem.. — Niixi, Mar 20 '21 at 18:33

React + TS - pass parameters with redirect

1 Answers1