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

Question

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

// Мой маршрут и // Фрагмент фрагмента

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

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

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

Answer 1

Попробуйте <Route path="/items/:id" component={SingleGoods} />, запишите '/' перед параметром.

параметры URL-адреса маршрутизатора реакции

Answer 2

Является ли ваше намерение использовать путь как-то так: /items/11 затем сделать запрос на выборку с использованием этого id?Если да, тогда измените свой второй Route на:

<Route path="/items/:id" component={SingleGoods} />

Поэтому, когда вы посещаете /items/11, вы можете использовать этот идентификатор в своем SingleGoods компоненте.

См .: React Router URL params .

Answer 3

Я не уверен, правильно ли я вас понимаю, но думаю:

<Route path="/items:id" component={SingleGoods} />  

должно быть

<Route path="/items/:id" component={SingleGoods} /> 

с еще одной косой чертой в пути.