如何移除useLocation获取的pathname中的斜杠/

这里有几种简单的方法处理useLocation返回的pathname，去掉开头的斜杠：

方法1：正则替换（适配多斜杠场景） #

用正则匹配开头的一个或多个斜杠，替换为空字符串，能处理/mypage、//mypage这类情况：

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

function PageHeader() {
  const { pathname } = useLocation();
  // 移除开头所有斜杠
  const pageName = pathname.replace(/^\/+/, '');
  return <div>我的页面：{pageName}</div>;
}

方法2：字符串截取（适合单斜杠场景） #

如果确定路径只会以单个斜杠开头，直接从索引1开始截取字符串即可。若路径是根路径/，可以设置默认值：

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

function PageHeader() {
  const { pathname } = useLocation();
  // 从第2个字符开始截取，根路径时显示"首页"
  const pageName = pathname.slice(1) || '首页';
  return <div>我的页面：{pageName}</div>;
}

方法3：拆分路径取最后一段（适合多级路径） #

如果需要的是路径的最后一部分（比如/user/profile要显示profile），可以拆分路径后取最后一段：

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

function PageHeader() {
  const { pathname } = useLocation();
  // 拆分路径后取最后一段，根路径时显示"首页"
  const pageName = pathname.split('/').pop() || '首页';
  return <div>我的页面：{pageName}</div>;
}

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