從反應中獲取API發送給我錯誤的URL

學習React.js和Node.js，並在後端使用Express API和前端使用React.js製作簡單的粗糙應用程序。我的React.js的App.js看起來像這樣。
從反應中獲取API發送給我錯誤的URL

`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;

我在做一個應用程序時，如果你去/租金，將取回數據並打印的東西。這是目前正在工作，我的數據庫中的所有數據正在渲染。
現在我試圖去/租賃/ 1或/租賃/ 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;

當我這樣做，我得到一個錯誤說GET http://localhost:3000/rentals/api/listofrentals/2 404 (Not Found) 我試圖從URL http://localhost:3000/api/listofrentals/2獲取不明白爲什麼「租賃」的部分是在URL中。 My React服務器在localhost：3000上運行，node.js在localhost：30001上運行。而我的React的package.json有這個"proxy": "http://localhost:3001/"

來源

2017-09-27 craftdeer

默認提取將訪問你使用它的相對路徑。您可以通過使用/開始你的url來指定你想繞過相對路徑。

fetch('/api/listofrentals/2')

來源

2017-09-27 01:42:28 DillGromble

修復它。謝謝。我通過執行類似'fetch（./../ api/listofrentals/2）的方法繞過了它。 – craftdeer

從反應中獲取API發送給我錯誤的URL

回答

相關問題