Question

我有一种情况，我必须从一个页面重定向到另一页面，并将状态作为prop传递给重定向的页面。我已经使用了history.push，并尝试以 pick[0]，但我在console.log(this.props.location.state.searchString)的位置上出错了。

我正在使用React Router和Typescript。

我的history.push代码段

Property 'location' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'

还有我重定向的组件代码，

    class HomePageContent extends React.Component<RouteComponentProps<{}>, HomePageState> {
    
        constructor(props: RouteComponentProps<{}>) {
            super(props);
            this.state = {
                value: ''
            }
        }
 

   

<Input ....
    onKeyDown={evt => {
            if(evt.detail.key=='Enter')
            {
            this.props.history.push
             ({
                pathname: '/resultspage',
                state: { searchString : this.state.value }
             });
           }
    />
...}
export default withRouter(HomePageContent);

我是否必须在重定向的类中的此处某处声明export default class Index extends React.Component { render() { console.log(this.props.location.state.searchString); return (......);}？

我的App.tsx看起来像这样，

props

有人可以告诉我如何在重定向页面上访问此道具吗？

Answer 1

将路径更改为

path="/resultspage/:searchString"

然后将您的push函数参数更改为

this.props.history.push(`/resultspage/${searchString}`)

然后在SearchResults组件中

 const { searchResult } = useParams();

通过history.push传递的状态在重定向类中不可访问

1 个答案: