我想在<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的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的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>
);
}
Con Posidielov说过，当前路由在this.props.location.pathname中。
但是如果您想匹配一个更具体的字段，如键(或名称)，您可以使用matchPath来查找原始路由引用。
import { matchPath } from `react-router`
const routes = [{
key: 'page1'
exact: true,
path: '/page1/:someparam/',
component: Page1,
},
{
exact: true,
key: 'page2',
path: '/page2',
component: Page2,
},
]
const currentRoute = routes.find(
route => matchPath(this.props.location.pathname, route)
)
console.log(`My current route key is : ${currentRoute.key}`)
这里有一个使用历史的解决方案阅读更多
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”
