reactjs – React js做公共标题

发布时间：2020-12-15 20:50:55 所属栏目：百科来源：网络整理

导读：新的反应js,我需要做头部常见,需要根据路线变化更改标题.我需要创建header.jsx文件并导入它吗？或者如何用路由呈现标题(公共文件)？我的路由部分看起来像这样. import React from 'react';import ReactDOM from 'react-dom';import App from './App.jsx';im

新的反应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>
);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!