Question

我正在尝试从具有动态ID的API提取数据。我的路线上有冒号。调试完该问题后，我注意到冒号被包含在链接中的ID之前，因此获取请求失败。请如何解决此问题。我的意思是，不是向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} />

应该是

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

路径中有另一个斜杠。

Answer 2

尝试<Route path="/items/:id" component={SingleGoods} />，注意参数前的'/'。

react-router url params

Answer 3

您是否打算使用类似以下的路径：/items/11，然后使用此id进行获取请求？如果是，则将第二个Route更改为：

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

因此，当您访问/items/11时，可以在SingleGoods组件中使用此ID。

请参阅：React Router URL params。

如何在React项目中从API URL删除冒号（:)

3 个答案: