我想显示title在<AppBar />以某种方式从目前的路线通过。
在 React Router v4 中，如何将<AppBar />当前路由传递到它的titleprop 中？
<Router basename='/app'>
<main>
<Menu active={menu} close={this.closeMenu} />
<Overlay active={menu} onClick={this.closeMenu} />
<AppBar handleMenuIcon={this.handleMenuIcon} title='Test' />
<Route path='/customers' component={Customers} />
</main>
</Router>
有没有办法通过从自定义自定义标题prop上<Route />？
在 react-router 的 5.1 版本中有一个名为useLocation的钩子，它返回当前的位置对象。这在您需要知道当前 URL 的任何时候都可能有用。
import { useLocation } from 'react-router-dom'
function HeaderView() {
const location = useLocation();
console.log(location.pathname);
return <span>Path : {location.pathname}</span>
}
在react-router 4 中，当前路由在 - 中
this.props.location.pathname。只需获取 this.props并验证即可。如果您仍然没有看到， location.pathname那么您应该使用装饰器withRouter。
这可能看起来像这样：
import {withRouter} from 'react-router-dom';
const SomeComponent = withRouter(props => <MyComponent {...props}/>);
class MyComponent extends React.Component {
SomeMethod () {
const {pathname} = this.props.location;
}
}
如果您正在使用 react 的模板，那么您的 react 文件的结尾如下所示：export default SomeComponent您需要使用高阶组件（通常称为“HOC”），withRouter.
首先，您需要withRouter像这样导入：
import {withRouter} from 'react-router-dom';
接下来，您将要使用 withRouter. 您可以通过更改组件的导出来做到这一点。您很可能想从 更改export default ComponentName为export default withRouter(ComponentName)。
然后你可以从props中获取路线（和其他信息）。具体来说location，match、 和history。吐出路径名的代码是：
console.log(this.props.location.pathname);
此处提供了包含其他信息的好文章：https : //reacttraining.com/react-router/core/guides/philosophy
react-router v5有一个叫做useLocation的hook ，不需要HOC什么的，非常简洁方便。
import { useLocation } from 'react-router-dom';
const ExampleComponent: React.FC = () => {
const location = useLocation();
return (
<Router basename='/app'>
<main>
<AppBar handleMenuIcon={this.handleMenuIcon} title={location.pathname} />
</main>
</Router>
);
}
这是使用阅读更多的解决方案history
import { createBrowserHistory } from "history";
const history = createBrowserHistory()
路由器内部
<Router>
{history.location.pathname}
</Router>