在 react-router 中使用 history.push() 传递道具时出现问题

Question

我正在尝试使用 history.push() 将 props 传递给 React 中的另一个组件。我的代码如下所示：

 history.push({pathname:`/tickets/solveticket`,
                state:{ticket:this.props.ticketInfo, user:this.props.currentUser}}); 


 window.location.reload()

历史是这样导出的：

 import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

和我的路线配置：

 import {BrowserRouter as Router,Route,Switch,Link } from "react-router-dom"; 
    <Router history={history}> 
    ... <PrivateRoute exact path="/" component={Dashboard} />
                    <Route exact path="/login" component={Login} />
                    <Route exact path="/register" component={Register} />


                    <PrivateRoute exact path="/dashboard" component={Dashboard} />

`

在 /tickets/solveticket url 上呈现的组件采用这样的历史参数：

constructor(props){
    super(props)
    this.state={
       ticketToSolve:this.props.location.state.ticket,
       currentUser:this.props.location.state.user
    }
}

但我收到此错误：

TypeError: Cannot read property 'ticket' of undefined

我试着用 withRouter 包装所有东西，但它仍然不起作用。我也尝试使用 this.props.history.push 而不是导出的历史记录，但在那种情况下我的历史记录无法识别..我已经谷歌搜索了一天并且运行不知道我可以尝试什么，所以如果有人有任何想法请写下来..提前致谢:)

Answer 1

尝试

constructor(props){
    super(props)
    this.state={
       ticketToSolve:"",
       currentUser:""
    }
}
componentDidMount(){
 if(this.props.location.state){
  this.setState({
       ticketToSolve:this.props.location.state.ticket,
       currentUser:this.props.location.state.user
    })
  }
}

因为有时您无法确定变量是否已经设置。可能会首先反应渲染此代码。

Answer 2

您需要通过 'history.push' 传递值，例如：

history.push(`/tickets/solveticket`, {
  ticket:this.props.ticketInfo, 
  user:this.props.currentUser
});

希望这对你有用。

在 react-router 中使用 history.push() 传递道具时出现问题

Problem when passing props using history.push() in react-router

browser-history

reactjs

react-router

react-router-dom