如何使用React-Router更新基于URL / path的ReactJS组件
使用React-Router时，如何根据URL / path更新ReactJS组件？
下面的代码可以工作，但这是正确的方法吗？进行一次简单的更新似乎需要很多代码。我希望在路由器中会有一个有状态的API调用来自动处理这种情况。
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);回答 3
Stack Overflow用户
发布于 2016-02-25 07:30:04
在react-router 2.0.0中，您可以使用hashHistory或browserHistory
browserHistory.listen(function(ev) {
console.log('listen', ev.pathname);
});
<Router history={browserHistory}>{routes}</Router>Stack Overflow用户
发布于 2015-02-06 05:17:00
如果您使用的是react-router > v11.0，则已将其更新。
你可以阅读the details here
TLDR：
// v0.11.x
var Something = React.createClass({
mixins: [ Router.State ],
render: function () {
var path = this.getPath();
}
});有关完整的State应用编程接口：https://github.com/rackt/react-router/blob/master/doc/04%20Mixins/State.md
Stack Overflow用户
发布于 2014-11-27 15:43:19
这个问题已经有一段时间了，似乎应该有一个更直接的解决方案，但我将尝试一下，并分享我们在应用程序中所做的事情。
我们使用Flux架构，它有Stores的概念，当组件的状态更新时，它会通知组件。在react-router中，他们有一个非常适合这个模型的PathStore，因为当URL发生变化时，它可以通知关心并需要更新的组件。
我们在应用程序中使用的StoreListener可以在这里公开获得：https://github.com/odysseyscience/react-flux-suppprt。我应该发布到NPM上，但是现在还没有。如果你觉得有帮助的话，我很快就会这么做的。
下面是我们如何使用StoreListener监听来自react-router的PathStore上的更改，以及如何在MyHeader中使用它
var StoreListener = require('path/to/StoreListener');
var PathStore = require ('react-router/modules/stores/PathStore');
var MyHeader = React.createClass({
mixins: [
StoreListener(PathStore)
],
getStateFromStores: function() {
return {
path: PathStore.getCurrentPath()
};
},
render: function() {
var path = this.state.path;
var myPath;
var classes;
if (this.state.path === "/") {
myPath = 'about';
classes = 'ion-ios7-information';
} else {
myPath = '/';
classes = 'ion-ios7-rewind';
}
return (
<Link to={myPath}>
<i className={classes} />
</Link>
);
}
});这是从一个写着“我关心PathStore的变化”的mixin开始的。每当此存储(或任何被侦听的存储)发生更改时，都会在组件上调用getStateFromStores()，以便从您希望在this.state上可用的存储中检索数据。如果该数据发生更改，将再次调用render()，您将重新读取this.state，并应用您的更改。
这正是我们在页眉选项卡上或应用程序中依赖于当前URL的任何其他地方应用某些“活动”CSS类的模式。
请注意，我们使用webpack来捆绑我们的CommonJS模块，因此可能存在一些关于环境的假设，这些假设可能适用于您，也可能不适用于您。
一个月前，当我第一次看到这个问题时，我没有回答它，因为我认为有更好的方法，但也许我们的解决方案可以帮助其他人解决同样的问题。
https://stackoverflow.com/questions/26350107
复制相似问题