Как удалить двоеточие (:) из URL-адреса API в проекте React

Я пытаюсь получить данные из API с динамическим идентификатором. У меня двоеточие в моем пути маршрута. После отладки проблемы я заметил, что двоеточие добавляется перед идентификатором в ссылке, следовательно, запрос на выборку не выполнен. Пожалуйста, как я могу это решить. Я имею в виду, что вместо ap1.yoursite.com/111 я отправляю запрос на ap1.yoursite.com/:111, в результате чего объект fetch остается нулевым. Как я могу заставить двоеточие работать как динамический путь, но не мешать моему URL-адресу?

// Мой маршрут и // Получение фрагмента

const Main = props => (
  <Switch>
    <Route exact path = "/" component = {Goods} />
    <Route path = "/items:id" component = {SingleGoods} />
  </Switch>
);

const { id } = this.props.match.params;
console.info(id); //returns :number
fetch(`http://api.yoursite/${id}`)
  .then(response => response.json())
  .then(json => this.setState({ show: json }));

console.info(this.state.show); //always returns null, which is the initial state