React js do common header
React js do common header
我是ReactJS的新手。我需要一个通用的头部,并根据路由的变化来改变标题。我需要创建一个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(());
React js do common header这个问题的出现原因是,React Helmet插件并不适用于提供共享组件头部的功能。
解决方法是使用其他适合提供共享组件头部的方法,例如在项目中创建一个公共头部组件,然后在需要使用的地方引用该组件。
以下是一个示例代码,展示如何创建一个公共头部组件并在其他地方使用它:
import React from "react"; export default function CommonHeader() { return ({/* 这里是公共头部的内容 */}); }
然后,在其他组件中引用该公共头部组件:
import React from "react"; import CommonHeader from "./CommonHeader"; export default function Application() { return (); }{/* 其他组件的内容 */}
通过这种方式,我们可以在多个组件中共享同一个头部组件,避免重复编写相同的代码。
问题的出现原因是在React应用中,想要在不同的路由下显示不同的页面内容,并且在某些路由下隐藏头部组件。同时,还想要根据路由的变化动态修改头部标题和显示不同的菜单。但是在给定的代码中,没有提供实现这些功能的方法。
为了解决这个问题,我们需要对代码进行一些修改。首先,我们可以将头部组件从App组件中分离出来,以便在不同的路由下进行显示和隐藏。然后,我们可以使用React Router中的一些功能来根据路由的变化动态修改头部标题和显示不同的菜单。
以下是修改后的代码示例:
header.jsx:
class Header extends Component { render() { return (Your header); } }
app.jsx:
import { Link } from 'react-router-dom'; class App extends Component { render() { return (); } }{this.props.children}
- First Page
- Second Page
web-app.jsx:
import { BrowserRouter as Router, Route } from 'react-router-dom'; ReactDOM.render(, document.getElementById('root') );
在修改后的代码中,我们使用了react-router-dom库来实现路由功能。首先,我们将头部组件Header放置在App组件中,并在App组件中添加了一个ul列表,用于显示不同的路由链接。然后,在web-app.jsx文件中,我们通过使用BrowserRouter和Route组件来定义不同的路由。在每个路由中,我们分别指定了对应的路径和要渲染的组件。
通过这些修改,我们可以在不同的路由下显示不同的页面内容,并根据路由的变化动态修改头部标题和显示不同的菜单。
问题的出现原因:需要在多个路由中显示相同的头部(header)部分。
解决方法:
1. 第一种方法是将头部(header)部分定义为独立的组件,并在每个文件的顶部导入该组件。在需要显示头部(header)的地方,使用
import React from 'react'; export default React.createClass({ render() { return; } });{this.props.title}
2. 第二种方法是创建一个容器组件,使用之前定义的头部(header)组件,并在容器组件的render()方法中使用
import React from 'react'; export default React.createClass({ render() { return (); } });{this.props.children}
在声明路由时,使用
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.transitionTo('/path')
的操作。
以上是两种解决方法,可以避免在每个路由中重复定义头部(header)部分。