Make "key" optional on History navigation module

[jmaestree]

Clear and concise description of the problem

As a developer using Swiper I want to have the flexibility to use or not the key parameter on History navigation module so that will prevent to have undesired slashes (/) on the resulting URL.

Examples

In all the cases will have the following Swiper implementation:

<Swiper {...props}>
  <SwiperSlide key="1" data-history="slide-1">
  <SwiperSlide key="2" data-history="slide-2">
  <SwiperSlide key="3" data-history="slide-3">
  ...
  <SwiperSlide key="n" data-history="slide-n">
</Swiper>

Case 1: key is set to undefined

Given the following configuration for the History navigation module:

history={{
  enabled: true,
  keepQuery: false,
  replaceState: true,
  key: undefined,
  root: `/slug/`,
}}

When navigating through the slider, the resulting URL will be:

• /slug/undefined/slide-2
• /slug/undefined/slide-3
• /slug/undefined/slide-n
• ...

Case 2: key is set to empty string ''

Given the following configuration for the History navigation module:

history={{
  enabled: true,
  keepQuery: false,
  replaceState: true,
  key: '',
  root: `/slug/`,
}}

When navigating through the slider, the resulting URL will be:

• /slug//slide-2
• /slug//slide-3
• /slug//slide-n
• ...

Suggested solution

In module History navigation we could provide following implementation:

As you can see on this file (src/modules/history/history.js, line 56 to 62), when the new URL is being generated, the key param is always printing his value on the template string.

if (swiper.params.history.root.length > 0) {
  let root = swiper.params.history.root;
  if (root[root.length - 1] === '/') root = root.slice(0, root.length - 1);
  value = `${root}/${key}/${value}`;
} else if (!location.pathname.includes(key)) {
  value = `${key}/${value}`;
}

We can make it optional, for example with a ternary when printing the key value:

if (swiper.params.history.root.length > 0) {
  let root = swiper.params.history.root;
  if (root[root.length - 1] === '/') root = root.slice(0, root.length - 1);
  value = `${root}${key ? `/${key} : ''`}/${value}`;
} else if (!location.pathname.includes(key)) {
  value = `${key ? `/${key} : ''`}${value}`;
}

By this way, taking into account the cases explained before, the result will be:

Case 1: key is set to undefined

• /slug/slide-2
• /slug/slide-3
• /slug/slide-n
• ...

Case 2: key is set to empty string ''

• /slug/slide-2
• /slug/slide-3
• /slug/slide-n
• ...

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR