我是新手.我需要有一个共同的标题和改变标题，根据路由的变化.我需要创建一个header.jsx文件并导入它吗？或者，我如何用route呈现头文件(公共文件)？
我的路由部分如下所示:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import Home from './Home.jsx';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/home" component = {Home} />
<Route path = "/" component = {App}>
</Route>
</Router>
));
这应该是有效的:
头球.jsx:
class Header extends Component {
render() {
return (<div>Your header</div>);
}
}
第一页.jsx:
class FirstPage extends Component {
render() {
return (<div>First page body</div>);
}
}
第二页.jsx
class SecondPage extends Component {
render() {
return (<div>Second page body</div>);
}
}
应用程序.jsx:
import Header from './header.jsx';
class App extends Component {
render() {
return (
<div>
<Header />
{this.props.children}
</div>
);
}
}
web-应用程序.jsx:
import App from './app.jsx';
import FirstPage from './first-page.jsx';
import SecondPage from './第二页.jsx';
ReactDOM.render(
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<Route path = "/first" component = {FirstPage}>
<Route path = "/second" component = {SecondPage}>
</Route>
</Router>
);