why appeared multiple "navbar__link--active"

[Chasen-Zhang]

💥 Proposal

if i change the {to:'/'} to {to: '/xxxxxx'} , it is ok, but i hope my home page is '/', what should i do?

Have you read the Contributing Guidelines on issues?

yes

[Josh-Cena]

It's impossible for us to help you without further information about setup, Docusaurus version, etc. Also, GH issues is not for questions. If you feel like it's a bug, please use the bug template; otherwise, let's move to discussions.

[Chasen-Zhang]

To take effect! it is Ok! thank you! but I don't know why

[Josh-Cena]

https://docusaurus.io/docs/api/themes/configuration#navbar-link

[slorber]

Not sure but it might be possible to use exact: true (ReactRouter Link prop).
https://reactrouter.com/web/api/NavLink/exact-bool

If this doesn't work, we should probably allow this

[Fannon]

Having an excact: true options sounds like a good option! This is also what I would have expected from a navbar, that it doesn't behave like a "breadcrumb" in that it marks you the complete path. This would also be more convenient than supplying many base regexes.

How could such an option be passed?

[yolandaccc]

Ah, I see. You would need to make the link active on exactly the route path. Try this:

{
  to: '/',
  position: 'left',
  label: '...',
  activeBaseRegex: '^/$',
}

it looks ok, but when I refresh the website the issues will come back. I find that when i refresh the website the second link add '/' in website.but i don't know how to write the activeBaseRegex.