通过重定向响应TS-pass参数

Question

你好，我有一个应用程序，我想在成功创建一个新房间后重定向用户。我想把他重定向到URL中带有房间ID的页面，但我想用这个重定向发送数据到组件状态。

应用程序内。我有

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

IM重定向从CreateRoom组件像这样

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

这很好，可以让我改变方向。这是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;

但有一个主要的问题，它重定向我，但总是没有状态参数ownerName...

关键是：房间的创建者将被重定向到URL，以显示房间信息与所有者的其他信息，如果他共享此链接给其他用户，他们将拥有者名称为空，他们不能查看其他信息。

有人能帮我吗？我对react和typescript是新手，我不知道怎么做。。非常感谢：）

Answer 1

位置状态数据将在location.state中可用：

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

因此，您可以：

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

查看此历史对象。

并且不需要将数据从“道具”或“位置状态”（您的案例）复制到“组件状态”，除非您有充分的理由这样做。

下面是如何修复组件道具的打字（将其与react-router-dom提供的RouteProps相结合）：

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>

*静态路由器