新的反应js,我需要做头部常见,需要根据路线变化更改标题.我需要创建header.jsx文件并导入它吗？或者如何用路由呈现标题(公共文件)？
我的路由部分看起来像这样.
我的路由部分看起来像这样.
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>
));
这应该工作：
header.jsx：
class Header extends Component {
render() {
return (<div>Your header</div>);
}
}
第一page.jsx：
class FirstPage extends Component {
render() {
return (<div>First page body</div>);
}
}
第二page.jsx
class SecondPage extends Component {
render() {
return (<div>Second page body</div>);
}
}
app.jsx：
import Header from './header.jsx';
class App extends Component {
render() {
return (
<div>
<Header />
{this.props.children}
</div>
);
}
}
网络app.jsx：
import App from './app.jsx';
import FirstPage from './first-page.jsx';
import SecondPage from './second-page.jsx';
ReactDOM.render(
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<Route path = "/first" component = {FirstPage}>
<Route path = "/second" component = {SecondPage}>
</Route>
</Router>
);
