facebook / facebook/docusaurus

Navbar item support isActive attribute, hash link activation is invalid

Abierto
#8,003 0 comentarios 0 reacciones 0 asignados Ver en GitHub
bug status: needs triage
Lenguaje dominante
TypeScript
Estrellas
66.2k
Forks
10k
Merge medio
1 d 3 h
PR fusionados (30 d)
52

Descripción

### 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.

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.