所以如果你需要在你的路由中显示一个共同的标题,有几种方法可以做到。一种是您可以在其自己的组件中定义您的标头。一些简单的例如:
import React from 'react';
export default React.createClass({
render() {
return <div className='header'><h1>{this.props.title}</h1></div>;
}
}
然后在你的 home 组件、app 组件等中。在每个文件的顶部导入它之后,只需将它放在你的 render() 中。
另一种选择是创建自己的容器组件,仍然使用我们上面定义的 Header 组件:
import React from 'react';
export default React.createClass({
render() {
return (
<div className='container'>
<Header title={this.props.title} />
{this.props.children}
</div>
);
}
}
然后你在哪里声明你的路线:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import Home from './Home.jsx';
import Container from './Container.jsx';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/home" component = {<Container title='home'><Home /></Container>} />
<Route path = "/" component = {<Container title='app'><App /></Container>}>
</Route>
</Router>
));
不可否认,我还没有尝试过第二种选择。如果您想执行诸如router.transitionTo('/path')
.
如果您不想到处重复,这只是一个选择。