如何从 React 项目的 API URL 中删除冒号 (:)

Question

我正在尝试使用动态 ID 从 API 获取数据。 我的路线路径中有冒号。 调试问题后，我注意到冒号包含在链接中的 id 之前，因此获取请求失败。 请问我该如何解决这个问题。 我的意思是，我将请求发送到 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.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} /> ，注意参数前的“/”。

反应路由器网址参数

Answer 3

您是否打算使用类似这样的路径： /items/11然后使用此id发出 fetch 请求？ 如果是，则将您的第二条Route更改为：

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

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

请参阅： 响应路由器 URL 参数。