reactjs - 如何根据使用 React 的路由更改单独标题组件上的页面标题?
问题描述
我正在使用 React,并且我的项目结构的方式是我有布局组件,然后是主页组件。我想根据用户到达的路线更改标题组件中页面的标题。
这是我的 App.jsx:
import React, { Suspense, lazy, Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Header from './layout/Header.jsx';
import Footer from './layout/Footer.jsx';
const Home = lazy(() => import('./pages/Home.jsx'));
const Weather = lazy(() => import('.pages/Weather.jsx'));
const Encryption = lazy(() => import('./pages/Encryption.jsx'));
const Video = lazy(() => import('./pages/Video.jsx'));
class App extends Component {
render() {
return (
<Router>
<>
<Header/>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/weather" component={Weather}/>
<Route path="/encryption" component={Encryption}/>
<Route path="/video" component={Video}/>
</Switch>
</Suspense>
<Footer/>
</>
</Router>
);
}
}
export default App;
我的 Header.jsx 组件是这样的:
import React, { Component } from 'react';
class Header extends Component {
constructor(props) {
super(props);
}
render() {
return (
<h1>Page Title</h1>
);
}
}
export default Header;
解决方案
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
class Header extends Component {
constructor(props) {
super(props);
}
render() {
const path = this.props.location.pathname.slice(1);
return (
<div>
<h1>{path}</h1>
</div>
);
}
}
export default withRouter(Header);
推荐阅读
- java - JavaFX-11/macOS:DirectoryChooser 崩溃“NSObjectNotAvailableException”
- reactjs - React material-ui Select 组件的标签显示在内容之上
- google-ads-api - google adwords 转换跟踪可以通过后端集成来实现吗?
- vba - 使用 MS Access VBA 从 Outlook 发送电子邮件
- uwp - UWP 从背景开始音频
- ssas - 排除总和度量的最后一个事实行
- google-apps-script - 在允许查看者访问幻灯片演示文稿之前,我可以使用 Slides API 添加“同意条款”对话框吗?
- privileges - 每个新创建用户的 Aurora MySql 默认 USAGE 权限
- powershell - Fastlane 和 Powershell 两因素身份验证
- javascript - 如何在角度8中打开标签