我想在<AppBar />中显示一个标题，该标题以某种方式从当前路由传递进来。
在React Router v4中，<AppBar />如何能够将当前路由传递到它的标题道具中?
<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>
是否有一种方法从<Route />上的自定义道具传递自定义标题?
当前回答
在react-router v5中有一个叫做useLocation的钩子，不需要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>
);
}
其他回答
这里有一个使用历史的解决方案阅读更多
import { createBrowserHistory } from "history";
const history = createBrowserHistory()
在路由器
<Router>
{history.location.pathname}
</Router>
Add
import {withRouter} from 'react-router-dom';
然后更改组件导出
export default withRouter(ComponentName)
然后你可以直接在组件本身中访问路由(不涉及项目中的任何其他内容)，使用:
window.location.pathname
2020年3月测试，“版本”:“5.1.2”
如果你正在使用react的模板，你的react文件的结尾看起来像这样:导出默认的SomeComponent，你需要使用更高阶的组件(通常称为“HOC”)，与throuter。
首先，你需要像这样用throuter导入:
import {withRouter} from 'react-router-dom';
接下来，您将希望使用withthrouter。您可以通过更改组件的导出来实现这一点。您可能希望将导出默认的ComponentName更改为使用throuter (ComponentName)导出默认。
然后你可以从道具中获得路线(和其他信息)。具体来说，是位置、匹配和历史。输出路径名的代码是:
console.log(this.props.location.pathname);
你可以在这里找到一篇包含更多信息的文章:https://reacttraining.com/react-router/core/guides/philosophy
在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 v5中有一个叫做useLocation的钩子，不需要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>
);
}
