如何通过React Router访问BrowserRouter的basename属性？

当然可以不用手动解析Location对象来获取basename啦！React Router本身就提供了便捷的方式，让你在应用的任意组件里轻松拿到这个配置，不用自己折腾路径解析～

针对React Router v5 #

函数组件：用useRouteMatch钩子 #

直接调用useRouteMatch，返回的match对象里的base属性就是你设置的basename：

import { useRouteMatch } from 'react-router-dom';

function AnyComponent() {
  const match = useRouteMatch();
  // 这里就能拿到你设置的 "/calendar"
  console.log('当前basename:', match.base);
  
  return <div>当前应用的basename是：{match.base}</div>;
}

类组件：用withRouter高阶组件 #

如果是类组件，可以用withRouter包裹组件，它会把路由相关的props（包括match）传给你的组件：

import React from 'react';
import { withRouter } from 'react-router-dom';

class ClassComponent extends React.Component {
  render() {
    const { match } = this.props;
    return <div>当前应用的basename是：{match.base}</div>;
  }
}

// 别忘了用withRouter包裹后导出
export default withRouter(ClassComponent);

针对React Router v6 #

v6里调整了API，你可以用useRouter钩子直接获取包含basename的路由对象：

import { useRouter } from 'react-router-dom';

function AnyComponent() {
  const router = useRouter();
  // 直接拿到basename
  console.log('当前basename:', router.basename);
  
  return <div>当前应用的basename是：{router.basename}</div>;
}

至于你说在history对象里找不到basename，是因为basename是React Router在BrowserRouter层面添加的配置，属于路由上下文的一部分，并不是底层history对象的属性，所以得用上面这些路由提供的API来获取哦～

内容的提问来源于stack exchange，提问作者Fellow Stranger