Fetching API from react sending me wrong URL

Question

Learning React.js and Node.js and making a simple crud app with Express API on the back-end and React.js on the front end. App.js of my React.js looks like this.

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

I am making an app that when if you go to /rentals, it will fetch the data and print stuff. This is currently working and all the data from my database is rendering.
Now I am trying to go to /rentals/1 or /rentals/2 then trying to print only listings of that 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;

When I do this, I get an error saying GET http://localhost:3000/rentals/api/listofrentals/2 404 (Not Found) I am trying to fetch from the URL http://localhost:3000/api/listofrentals/2 and do not understand why the "rentals" part is in the url. My React server is running on localhost:3000 and node.js is running on localhost:30001. And my React's package.json has this "proxy": "http://localhost:3001/"

DillGromble · Accepted Answer · 2017-09-27 01:42:28Z

7

Fetch by default will access a relative path to where you are using it. You can specify you want to bypass the relative path by starting your url with /.

fetch('/api/listofrentals/2')

answered Sep 27, 2017 at 1:42

DillGromble

3832 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

craftdeer Over a year ago

that fixed it. thank you. I was bypassing it by doing something like `fetch(./../api/listofrentals/2).

madhu131313 · Accepted Answer · 2018-03-18 20:00:04Z

0

In case if you want to change the base url for testing. You can turn off web security in Google and use. In ubuntu command line it is

google-chrome --disable-web-security --user-data-dir

answered Mar 18, 2018 at 20:00

madhu131313

7,4367 gold badges43 silver badges53 bronze badges

Collectives™ on Stack Overflow

Fetching API from react sending me wrong URL

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related