React Router v4 URL с ошибкой параметров, когда / в конце

Question

У меня проблема с React Router.

Я создал простое приложение в песочнице кода, чтобы продемонстрировать это.

ссылка на коды и поля

Описание

Когда в маршрутизаторе есть "/" в конце или "/param ", то после нажатия на другую ссылку добавляется дополнительное слово.

Например, есть 4 пункта меню

• Cash In Performance - https://foo.com/
• Прогноз денежных средств - https://foo.com/forecast
• Список денежных средств - https://foo.com/cashinlist
• Монитор - https://foo.com/newmonitor

Когда указывать https://foo.com/forecast добавьте "/" или какой-либо параметр "/ 2", после чего после нажатия на другой пункт меню, кроме URL-адреса Cash In Performance, будет выглядеть так (например, нажмите на Monitor)

https://foo.com/forecast/newmonitor

Но это должно быть https://foo.com/newmonitor

Шаги для воспроизведения

1. Перейти к коду в песочнице (используйте ссылку выше)

2. Нажмите на ссылку "Прогноз наличных"

   URL должен быть таким https://myjn2170zp.codesandbox.io/forecast

3. Затем нажмите на один из трех прогнозов.

   Например, прогноз 1 и URL должны быть такими: https://myjn2170zp.codesandbox.io/forecast/1

4. После этого нажмите на ссылку Монитор

   URL-адрес выглядит следующим образом https://myjn2170zp.codesandbox.io/forecast/newmonitor

   Но так и должно быть https://myjn2170zp.codesandbox.io/newmonitor

Слово " прогноз " добавлено в URL, но не должно быть так.

Answer 1

Вам нужно установить начальные ссылки, чтобы в начале было /.В противном случае ссылка типа href="something" всегда интерпретируется как переход к «чему-то» в текущей папке.Это нормальное поведение браузера, оно не имеет ничего общего с реакцией / реакцией-маршрутизатором.

Поэтому используйте

const menuItems = [
  {
    key: 1,
    name: "Cash In Performance",
    icon: "itm_icon-insert_chart",
    link: "/"
  },
  {
    key: 2,
    name: "Cash in Forecast",
    icon: "itm_icon-turnover",
    link: "/forecast"
  },
  {
    key: 3,
    name: "Cash In List",
    icon: "itm_icon_list",
    link: "/cashinlist"
  },
  {
    key: 4,
    name: "Monitor",
    icon: "itm_icon-dvr",
    link: "/newmonitor"
  }
];