応答からのAPIの取得が間違ったURLを返す

Question

React.jsとNode.jsを学習し、バックエンドにはExpress API、フロントエンドにはReact.jsというシンプルなアプリケーションを作成します。 私のReact.jsのApp.jsはこのように見えます。

`import React, { Component } from 'react'; 
    import './App.css'; 
    import Rentals from './components/Rentals'; 
    import Idpage from './components/Idpage'; 

    import { 
     BrowserRouter as Router, 
     Route, 
     Link 
    } from 'react-router-dom'; 

    class App extends Component { 

    render() { 
    return (
    <div className="mainappdiv"> 
    <Router> 
      <main> 
      <Route exact path="/" component={Home} /> 
      <Route exact path="/rentals" component={Rentals} /> 
      <Route path="/rentals/:propertyid" component={Idpage} /> 
      </main>    
     </div>   
    </Router> 
    </div> 
    ); 
    }} 

export default App; 

私は、あなたが/レンタルに行けばとき、それはデータと印刷のものを取得することをアプリを作っています。これは現在作業中で、データベースのすべてのデータがレンダリングされています。
私は/ rentals/1または/ rentals/2に行き、そのIDのリスティングだけを印刷しようとしています。私はこれを行うと

import React, { Component } from 'react'; 

    class Idpage extends Component { 

    componentDidMount() { 
    fetch('api/listofrentals/2') 
     .then((response)=>{ 
      console.log(response) 
      return response.json() 
     }) 
     .then((singlerent)=>{ 
      console.log(singlerent) 
     }) 
} 


render() { 
    return (
     <div> 
      <p>this is the id page solo</p> 
      <p>{this.props.match.params.propertyid}</p> 
     </div> 

    ); 
}} 

    export default Idpage; 

は、私がURL http://localhost:3000/api/listofrentals/2からフェッチしようとしていると「レンタル」の部分がURLにある理由を理解していないGET http://localhost:3000/rentals/api/listofrentals/2 404 (Not Found) というエラーを取得します。 My Reactサーバーはlocalhost：3000で実行され、node.jsはlocalhost：30001で実行されています。そして、私のReactのpackage.jsonはこれを持っています"proxy": "http://localhost:3001/"

Answer 1

デフォルトでは、フェッチはあなたが使用している場所への相対パスにアクセスします。 /を使用してURLを開始することによって、相対パスをバイパスするように指定することができます。

fetch('/api/listofrentals/2')