Question

我想使用反应路由器将道具不是从父级传递给子级，而是从一个页面传递到另一个页面。我不确定它是否可能，但在这里发现了一些似乎可能的文章/帖子。基于读取我的代码应该工作的内容，但它没有。有人可以帮忙吗？

index.jsx：

ReactDOM.render(<HashRouter><App /> </HashRouter>,document.getElementById('app'))

App.jsx：

class App extends React.Component {
    render (){
        return (
            <div>

                <Switch history={browserHistory}>
                    ...
                    <Route exact path='/home/step1' component={Component1}/>
                    <Route exact path='/home/step2' component={Component2}/>
                </Switch>
            </div>
        )
    }
}
...
import { Switch, Route, browserHistory} from 'react-router-dom'

我的2个组件

...
import { Link, browserHistory } from 'react-router-dom';
export default class Component1 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            id: undefined
        }
        this.navigateToStep2=this.navigateToStep2.bind(this);
    }
    navigateToStep2(e){
        e.preventDefault();
        browserHistory.push({pathname: "/home/step2", state:{id: this.state.id}})

    }
}


import { Link, browserHistory } from 'react-router-dom';
export default class Component2 extends React.Component {

    render(){
        return (
            <div>
                <h1>hello: {this.props.id}</h1>
            </div>
        )
    }
}

我也尝试过：

   this.context.router.push({
        pathname: '/home/step2',
        state: {providerId: this.state.providerId}
    })

这不起作用但是据我所知，因为路由器4，我现在必须使用historybrowser？！

Answer 1

我不确定这是否是最佳答案，但我刚刚知道如何做到这一点：

而不是推动任何东西，我只是把它的洞察力链接到另一页：

<Link to={{
     pathname: '/home/step2',
     state: { id: this.state.id }
     }}>GO
</Link>

然后洞察我的另一页，我可以轻松访问它：

<h1>{this.props.location.state.id}</h1>

我仍然想知道为什么使用browserHistory.push ...在这里有意义，所以如果有人知道，那就知道了！

Answer 2

1）但这一行

<Switch history={browserHistory}>

你确定吗？应将历史记录提供给路由器上下文提供程序（在您的情况下为HashRouter）

2）然后，这一行

browserHistory.push({pathname: "/home/step2", state:{id: this.state.id}})

但是你肯定需要使用withRouter hoc / decorator来访问当前的历史对象，否则它无法处理保存历史状态的上下文（我想）。或者只使用上面答案中提到的Link组件

React - 如何通过react-router v4从一个页面传递道具到另一个页面？

2 个答案: