如何使用 React-Router 根据 URL/路径更新 ReactJS 组件 [英] How to update ReactJS component based on URL / path with React-Router
问题描述
如何在使用 React-Router 时根据 URL/路径更新 ReactJS 组件?
下面的代码有效,但这是正确的方法吗?似乎有很多代码可以进行简单的更新.我希望路由器中有一个有状态的 API 调用来自动处理这种情况.
var MyHomeView = React.createClass({componentDidMount:函数(){this.props.updateHeader();},渲染:函数(){返回 (<div><h2>家</h2>
);}});var MyAboutView = React.createClass({componentDidMount:函数(){this.props.updateHeader();},渲染:函数(){返回 (<div className="my-page-text"><h2>关于</h2>
);}});var MyHeader = React.createClass({混合:[当前路径],getInitialState: 函数() {返回 {myPath: "关于",课程:ion-ios7-信息"};},更新头:函数(){//类名指的是 www.ionicons.comif (this.getCurrentPath() === "/") {this.setState( {myPath: "about" } );this.setState( {classes: "ion-ios7-information" } );} 别的 {this.setState( {myPath: "/" } );this.setState( {classes: "ion-ios7-rewind" } );}},渲染:函数(){返回 (<链接到={this.state.myPath}><i className={this.state.classes}/></链接>);}});var App = React.createClass({更新头:函数(){this.refs.header.updateHeader();},渲染:函数(){返回 (<div><MyHeader ref="header"/><this.props.activeRouteHandler updateHeader={this.updateHeader}/>
);}});React.renderComponent((<路线><Route path="/" handler={App}><DefaultRoute handler={MyHomeView}/><Route name="about" handler={MyAboutView}/></路线></路线>), document.body);
在 react-router 2.0.0 中你可以使用 hashHistory 或 浏览器历史:
browserHistory.listen(function(ev) {console.log('listen', ev.pathname);});<Router history={browserHistory}>{routes}</Router>
How can I update a ReactJS component based on URL / path when using React-Router?
The code below works, but is this the correct way to do this? Seems like a lot of code to make a simple update. I was hoping there would be a stateful API call in the router to automatically take care of this scenario.
var MyHomeView = React.createClass({
componentDidMount: function() {
this.props.updateHeader();
},
render: function() {
return (
<div>
<h2>Home</h2>
</div>
);
}
});
var MyAboutView = React.createClass({
componentDidMount: function() {
this.props.updateHeader();
},
render: function() {
return (
<div className="my-page-text">
<h2>About</h2>
</div>
);
}
});
var MyHeader = React.createClass({
mixins: [ CurrentPath ],
getInitialState: function() {
return {
myPath: "about",
classes: "ion-ios7-information"
};
},
updateHeader: function() {
// Classnames refer to www.ionicons.com
if (this.getCurrentPath() === "/") {
this.setState( {myPath: "about" } );
this.setState( {classes: "ion-ios7-information" } );
} else {
this.setState( {myPath: "/" } );
this.setState( {classes: "ion-ios7-rewind" } );
}
},
render: function() {
return (
<Link to={this.state.myPath}>
<i className={this.state.classes} />
</Link>
);
}
});
var App = React.createClass({
updateHeader: function() {
this.refs.header.updateHeader();
},
render: function() {
return (
<div>
<MyHeader ref="header" />
<this.props.activeRouteHandler updateHeader={this.updateHeader} />
</div>
);
}
});
React.renderComponent((
<Routes>
<Route path="/" handler={App}>
<DefaultRoute handler={MyHomeView} />
<Route name="about" handler={MyAboutView} />
</Route>
</Routes>
), document.body);
In react-router 2.0.0 you can use the hashHistory or browserHistory:
browserHistory.listen(function(ev) {
console.log('listen', ev.pathname);
});
<Router history={browserHistory}>{routes}</Router>
这篇关于如何使用 React-Router 根据 URL/路径更新 ReactJS 组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!