Is react-router messing with the API Url?

Question

I have a API that works fine, but when i use it with react, the get request goes to

/api/profile/posts/profile/matt

whereas it should go to:

/api/posts/profile/matt

The proxy is set on localhost:8000/api, that works fine for the other APIs when is working with react.

Code for calling the APIs(Only profile one doesn't work, rest all work fine, even the profile one works when I use the absolute URL):

const res = username 
            ? await axios.get("posts/profile/"+username)
            : await axios.get("posts/timeline/6120b0e07ea0361eb4982b1c");

code for routes:

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/login">
          <Login />
        </Route>
        <Route path="/register">
          <Register />
        </Route>
        <Route path="/profile/:username">
          <Profile />
        </Route>
      </Switch>
    </Router>
  )
}

I have similar problem with this user as well: How to prevent React-router from messing up your API url

React Router does partial matching. Define the routes as exact, or change the routes names. — madflow
– madflow, Commented Oct 16, 2021 at 5:34
Where are you telling react to look for the /api/…? Maybe you have it in a constant in the service…adding exact to the route should work fine — Nacho
– Nacho, Commented Oct 16, 2021 at 5:35
I have tried adding exact but it doesn't work, the proxy in package.json is set as localhost:8000/api — devdev0z
– devdev0z, Commented Oct 16, 2021 at 5:47

nima · Accepted Answer · 2021-10-16 10:36:38Z

1

when you call an API, you need to pass a full path URL to the fetch or axios to work properly, but there are some points that need to be mentioned.

All APIs have two parts: a base URL (which is not changing) + other parts

For example: https://someAddress.com/api/posts/profile/matt

The base URL is https://someAddress.com/api/ here.

The Axios take a baseURL parameter to call your API's without specifying on every API call:

axios.defaults.baseURL = 'https://somwAddress.com/api/;

Now, simply call your API:

axios.get("posts/profile/" + username)

It requests to the full URL: https://someAddress.com/api/posts/profile/username

answered Oct 16, 2021 at 10:36

nima

8,99312 gold badges40 silver badges55 bronze badges

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

1 Comment

devdev0z Over a year ago

setting the base URL WORKED, what I'm still confused about is why do we need to set the baseURL when I have already defined the proxy in package.json (which works with other get/post requests in the application except the get profile posts one), anyways Thanks!

Rajat · Accepted Answer · 2021-10-16 05:34:43Z

0

You should provide the full URL in axios.get() method. for example- "HTTP://localhost:port/api_path".

Why only profile API messing with you because you have a profile route mentioned in your router

    <Route path="/profile/:username">
        <Profile />
    </Route>

You are not using any wild card routes if you would have It would create problem with every api

answered Oct 16, 2021 at 5:34

Rajat

114 bronze badges

2 Comments

devdev0z Over a year ago

isn't using the full path usually discouraged? how I can I fix this so that the request goes to the correct path without using the absolute URL?

Adesoft Over a year ago

I actually have a problem with using the full path at the development level, so you will have to change all your Axios request before production.

Collectives™ on Stack Overflow

Is react-router messing with the API Url?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related