React Router- link doesn't replace the url

Question

I have a problem with a link in React Router. I used the mapping to generate layout with links:

  weeksData = weeks.map((weekData)=>{
    const link = 'manager/' + weekData.start + '/' + weekData.end;
    return(
        <li key={weekData.start}>
          <Link to={link}>
            <p>
              <b>{dateHandler.getVisualDate(weekData.start)} - {dateHandler.getVisualDate(weekData.end)}</b>
            </p>
          </Link>
        </li>
    );
  });

The problem is that when I click on elements the url is not replaced but it is being added like this:

manager/1530504000000/1531108800000 => manager/1530504000000/manager/1529899200000/1530504000000

Any idea how to fix that? I was thinking to use queries (I mean '?' in url) but I didn't manage to make it work as well.

Answer 1

Add an extra /.

const link = '/manager/' + weekData.start + '/' + weekData.end;

This ensures the link is at the web root.

Without the /, the url will be relative to the current page.