reactjs - React Router 中的 matchPath 似乎没有考虑 Basename-6ren

reactjs - React Router 中的 matchPath 似乎没有考虑 Basename

转载作者：行者123 更新时间：2023-12-03 13:19:23

25

4

我正在研究react-router-dom版本5.0.0的一个错误，并且事件类未应用于事件链接。

当我们的基本名称为 / 时，它可以在开发中工作，但在我们的开发环境中，基本名称设置为“/some/basename/”。

如果我像这样直接调用这个matchPath:

matchPath("/some/basename/business", {
  exact: true,
  location: undefined,
  path: "\/business",
  strict: undefined
})

然后它返回null，如果我像这样调用matchpath，它会得到一个匹配:

matchPath("/business", {
  exact: true,
  location: undefined,
  path: "\/business",
  strict: undefined
})

所以看起来 matchPath 没有使用 basename 因为在尝试调试代码后我发现 matchPath 调用 pathToRegexp 创建此正则表达式:

/^\/business\/?$/i

该代码似乎仅使用 path 属性，而不是 location.pathname。

我尝试实现自己的 isActive 方法来记录发生的情况:

const isActive = (match: Match<any>, historyLocation: Location) =>  {
  const basename = (window.env.REACT_APP_BASE_URI || "/") === "/" ? "" : window.env.REACT_APP_BASE_URI;
  const fullUrl = `${basename.replace(/^(.+?)\/*?$/, "$1")}${historyLocation.pathname}`;

  console.log("----------------------");
  console.log({
    basename,
    fullUrl,
    historyLocation,
    historyLocationPathName: historyLocation.pathname,
    location: window.location.pathname,
    match,
  });
  console.log("----------------------");

  if (!match) {
    return;
  }

  return window.location.pathname.startsWith(`${fullUrl}`);
};

match 在环境中始终为 null，但在开发中工作正常。

为什么会这样？

最佳答案

HTML 概念

这实际上是react-router的巨大优势之一，因为在开发阶段你不知道项目将部署在哪里。它可能部署在:

主域
子域
子目录

所以最好的方法是提供定义所有相对 URL与基本 URL 无关的方式。 basename在 React-Router 中实际上并不是什么新鲜事，我们有 <base> HTML 中的 head 标签:

<head>
   <base href="https://www.yoursite.com/some/basename/" target="https://www.yoursite.com/other/">
</head>

这个标签意味着页面中所有的相对URL都会有https://www.yoursite.com/some/basename/添加到其中，例如:

<img src="header.jpg">

与

相同

<img src="https://www.yoursite.com/some/basename/header.jpg">

所有相关链接和表单操作也将具有 href附加到它们。

<小时/>

react 路由器

React-Router 基本上使用了这个概念(但是，不是基本标签)，所以当你设置 basename 时在 main ` 中，以下元素将对基本名称一无所知:

<Route>
<Link>
<Redirect>
matchPath

所以当你有这样的链接时:

<Link to="/page2" />

它实际上会重定向到/some/basename/page2 .

<小时/>

基本名称

React-Router Docs建议A properly formatted basename should have a leading slash, but no trailing slash. (例如/some/business)。然而，在大多数现代浏览器中，这根本不重要。

<小时/>

匹配路径

现在我们来谈谈matchPath。正如我之前所说，matchPath 不知道有关基本名称的任何信息，因此您请记住以下内容:

确保输入 URL 中不包含基本名称。
不要不要使用window.location.pathname，而是使用React-Router位置属性

那你应该没问题。因此，无论您的环境如何(开发/产品)，这都将始终有效:

matchPath(props.location.pathname, {
    path: '/business',
    exact: true,
});

<小时/>

注释

如果考虑到所有这些，您在整个项目中遇到了一些问题(包括所有链接、所有重定向、所有路由以及 matchPath)，那么您的基本基本名称在生产环境中设置错误。

关于reactjs - React Router 中的 matchPath 似乎没有考虑 Basename，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56302254/

25

4

0

文章推荐： javascript - 带有 PHP 的 wordpress 自定义 html 小部件

文章推荐： multithreading - 芯片多处理和对称多处理之间的区别？

文章推荐： string - 如何使用R删除字符串中的重复字符？

文章推荐： multithreading - 如何确保iocp中的线程安全接收？

java - 考虑 "if"语句和异常的长期性能成本
我一直认为使用“if”比捕获异常要好得多(就性能而言)。例如，这样做: User u = Users.getUser("Michael Jordan"); if(u!=null) System.
r - 考虑 am/pm 和毫秒将字符转换为日期
我正在尝试使用下一个格式将字符转换为日期。我有下一个数据框 i (我在最后添加了 dput() 版本的数据框): Date 1 Dec_28_2012_9:
php - 考虑 PHP 中的日期计算持续时间
考虑到 PHP 中的日期戳，我如何计算持续时间？我在日期之间使用的日期格式是“Y-m-d H:i:s”，我的工作代码只能计算时间之间的持续时间而不考虑日期。下面是我的代码: $assigned_t
r - 考虑 GLMM 中的时间相关性
我正在尝试解释 GLMM 中的自相关。我的响应变量是 bool 值，它表示一组 hive 的生命周期中是否存在 en 事件。我试图用一组描述每个巢状态的数值变量来预测此类事件的概率。因此，我在广义模型
javascript - 考虑 undefined variable
我对如何解释 undefined variable 感到有点困惑(我不确定你现在是否可以)。我正在尝试使用以下代码底部附近的 if else 语句(已注释掉的行)。这个想法是，如果请求歌曲的人不是与
c++ - 考虑。 (点)当应用于应该是运行时多态的东西时
Bjarne Stroustrup 的 The C++ Programming Language Fourth Edition 中的以下内容是什么意思？ "Consider . (dot) suspe
html - 考虑 float 元素的填充
我想要一个主元素，边 block 漂浮在它的右侧。我不知道边 block 的数量，也不知道它们的最终总高度。但是我的主要元素应该具有相同的高度(请参阅以下示例以更好地理解)，而无需使用列。 (虚线部分
android - 考虑 TextView 是可选择的
我在每个 TextView 上都有以下警告(来自 Lint)，在我的 XML 中有一个 ID。 Consider making the text value selectable by specify
algorithm - 考虑 "belongingness"的集群相似曲线？
目前，我有 6 条曲线，以 6 种不同的颜色显示，如下所示。这 6 条曲线实际上是由一个相同实验的 6 次试验生成的。这意味着，理想情况下它们应该是相同的曲线，但由于噪声和不同的试验参与者，它们
algorithm - 考虑 QWERTY 键盘布局检测随机键盘点击
winner of a recent Wikipedia vandalism detection competition建议可以通过“检测考虑到 QWERTY 的随机键盘点击来改进检测键盘布局”。示
c++ - 考虑 C++ 引用的好方法是什么？
多年来，我一直在编写 C 语言，主要是在嵌入式环境中，并且对指针有一个非常好的心智模型——我不必明确地考虑如何使用它们，我对指针算法 100% 感到满意，指针数组，指针指针等。我写的 C++ 很少，
c++ - 考虑 DST 获取时差
我正在使用 Boost.Date_time 来获取两个日期之间的时差。我希望代码在这些天也考虑夏令时的变化，并给我正确的时间间隔。考虑这个例子。 2015 年 11 月 1 日，美国的 DST 将发
r - 人名去大写(考虑 ' 和 -)
我有一个(人类)名字的向量，全部用大写字母表示: names <- c("FRIEDRICH SCHILLER", "FRANK O'HARA", "HANS-CHRISTIAN ANDERSEN")
Symfony2 呈现表单小部件 form_row()(HTML5 考虑)
我想呈现一个表单小部件。这是我要生成的原始 HTML: 使用这个: {{ form_row(form.email, { 'type' : 'email', 'attr' : { 'class' :
python - 如何防止 Poetry 考虑 .gitignore
我正在开发一个 python 项目，它使用 pythonnet 和几个 C# dll 作为依赖项。由于我不想将 dll 推送到 git 存储库，因此我调整了 .gitignore 文件。但是，现在
PHP:考虑 am/pm 将字符串转换为 DATETIME
考虑到上午/下午，我想将字符串转换为 php 数据时间。我想将 '03/06/2015 12:17 am' 转换为 php datatime。我试过了， $myDateTime = DateTim
python - 考虑 Pandas 中的几个属性，删除重复项
我想排除那些具有相同标题和同一年份的实例。 title votes ranking year 0 Wonderland 19 7.9 1931 1
Android numberDecimal，考虑 xml 布局中的语言环境
例如对于一个 EditText，通常指定 android:inputType="numberDecimal"用于文本字段应该包含十进制数。但这假设“。”用作小数点分隔符，在某些国家/地区使用“,”代替
ios - 考虑 iOS UI 初始化的推荐方法是什么？
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improv
java - 考虑 for-each 循环中 lambda 表达式中的两种情况
作为练习，我决定学习 Java 中的 lambda 表达式。我想重写我发现笨拙且冗长的旧代码。它检查命令行参数是否是(1)文件路径或(2)目录路径。在(1)场景中，它将命令行参数传递给方法。在 (2)

首页

博学

6Ren·AI

商城