facebook / facebook/docusaurus

Navbar item support isActive attribute, hash link activation is invalid

未关闭
#8,003 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
bug status: needs triage
主要语言
TypeScript
星标
66.2k
派生
10k
平均合并
1 天 3 小时
30 天内合并 PR
52

描述

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#reporting-new-issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [X] I have tried the `npm run clear` or `yarn clear` command.
- [X] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [X] I have tried creating a repro with https://new.docusaurus.io.
- [X] I have read the console error message carefully (if applicable).

### Description

In this scenario, activeBaseRegex alone will not achieve the desired effect.

Navbar configuration:
```ts
items: [
{ to: '/', position: 'left', label: 'home', exact: true, isActive: (_, {pathname, hash}) => `${pathname}${hash}` === '/' },
{ to: '/#a', position: 'left', label: 'aa', isActive: () => window.location.hash === '#a' },
{ to: '/#b', position: 'left', label: 'bb', isActive: () => window.location.hash === '#b' },
{ to: '/#c', position: 'left', label: 'cc', isActive: () => window.location.hash === '#c' },
{ to: '/#d', position: 'left', label: 'dd', isActive: () => window.location.hash === '#d'},
]
```

This configuration, in any case, does not meet expectations
```ts
{ to: '/', position: 'left', label: 'home', exact: true, },
{ to: '/#a', position: 'left', label: 'home#a', activeBaseRegex: '/#a' },
{ to: '/#b', position: 'left', label: 'home#b', activeBaseRegex: '/#b' },
```
I'm trying to fix this:https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/NavbarItem/NavbarNavLink.tsx#L66-L68
It feels like only isActive can solve this ge.

```ts
return isRegexpStringMatch(
activeBaseRegex,
hash ? `${pathname}${hash}` : pathname,
);
```
https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-common/src/utils/regexpUtils.ts#L16-L23

### Reproducible demo

_No response_

### Steps to reproduce

```ts
{ to: '/', position: 'left', label: 'home', exact: true, },
{ to: '/#a', position: 'left', label: 'home#a', activeBaseRegex: '/#a' },
{ to: '/#b', position: 'left', label: 'home#b', activeBaseRegex: '/#b' },
```

### Expected behavior

Able to highlight menu items normally.
image
image
image

### Actual behavior

image

### Your environment

- Public source code:
- Public site URL:
- Docusaurus version used: ^3.0.0-alpha.0
- Environment name and version (e.g. Chrome 89, Node.js 16.4):
- Operating system and version (e.g. Ubuntu 20.04.2 LTS):

### Self-service

- [ ] I'd be willing to fix this bug myself.

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。