Question

这是我的react-router配置。我有一个主要组件和子组件。

var Router = ReactRouter.Router;

var Route = ReactRouter.Route;

var transitionStates = CommonConstantsMixin.transitionStates;

var routes=(

    <Route path="/" component={OnboardModalComponent}>
        <Route path={transitionStates.ERROR} component={ErrorComponent}/>
        <Route path={transitionStates.SETUP_SELECTION} component={SetupSelectionComponent}/>
        <Route path={transitionStates.KEY_ENTRY} component={KeyEntryComponent}/>
        <Route path="*" component={ErrorComponent}/>
    </Route>

);
ReactDOM.render(<Router routes={routes} history={ReactRouter.hashHistory}></Router>, document.getElementById('onboard-container'));

我的OnboardModalComponent：

var OnboardModalComponent = React.createClass({

render: function(){
return (

            <div className="fp-modal-body">
                {this.props.children}               
            </div>

);
}
});

在我的反应设置组件中尝试导航，

var SetupSelectionComponent = React.createClass({

contextTypes: {
router: React.PropTypes.object.isRequired
},
enterKey: function(){
    OnboardActions.changeFlow(this.onboardFlows.ENTER_KEY);
    this.context.router.push("/"+this.transitionStates.KEY_ENTRY);
},
render: function () {
    return (

    <div className="fp-modal-body-inner" style={{display:'none'}}>
    ...............................
   </div>

);
}
});

这段代码有什么问题？为什么反应路由不起作用？

Answer 1

尝试使用onKeyPress，https://facebook.github.io/react/docs/events.html#keyboard-events，而不是使用enterKey

React-router编程导航无法正常工作

1 个答案: