axiosのurlに何故かRouteのpathが混ざってしまう

Question

解決したいこと

なぜかaxiosのurlに何故かRouteのpathが混ざってしまうので解決したいです。

発生しているエラー

xhr.js:220          GET http://localhost:3000/users/localhost:3001/api/v1/users/1 404 (Not Found)

該当するファイル

### apis/user.tsx ###

export const fetchUser = () => {
  return axios.get("http:localhost:3001/api/v1/users/1")
  .then(res => {
    return res.data
  })
  .catch((e) => console.error(e))
}

### App.tsx ###

import React from 'react';
import logo from './logo.svg';
import './App.css';

import { BrowserRouter, Routes, Route, useParams, Link } from "react-router-dom";

import { Users } from "./containers/User";
import { MainTargets } from "./containers/MainTarget";
import { SubTargets } from "./containers/SubTarget";


function App() {

  return (
    <>
      <BrowserRouter>
        <Link to="users/:userId">aaa</Link>
        <Routes>
          <Route path="users/:usersId" element={<Users />} />
          <Route path="main_targets" element={<MainTargets />}/>
          <Route path="sub_targets" element={<SubTargets />}/>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

### container/User.tsx ###

import { useEffect } from 'react'
import { useParams } from 'react-router-dom';
import { fetchUser } from '../apis/users';
export const Users = (props: any) => {
  const { usersId } = useParams();

  useEffect(() => {
    fetchUser()
      .then((data) =>
        console.log(data)
      )
  }, [])

  return (
  
    <>
      <div>User</div>

      
      <p>UserIdは{usersId}</p>
    </>
  )
}

自分の考えなど

・まず、axiosでhttp:localhost:3001/api/v1/users/1にGETリクエストを送っているはずなのにエラーではURLがhttp://localhost:3000/users/localhost:3001/api/v1/users/1のようになぜかRouteのpathと混ざったようなURLが表示される。もしかすると、これは送り先と今いる場所を繋げてエラーを出す仕様なのかもしれないが以前使ったときはこのようなエラーは起きなかった。また、再起動してもエラーが直らなかった。
・検索してもこのようなエラーは見つからなかった。API　Testerでリクエストを送ったときは成功したのでバックエンド側には問題はないと考えられる。

何かしらアドバイスがあればよろしくお願いいたします。

Answer 1

return axios.get("http:localhost:3001/api/v1/users/1")

最初の : の後に // が必要だと思われます。相対URLとみなされているのでしょう。

Comments

[senseIY]

回答して頂きありがとうございました。おかげさまで解決致しました。以降はタイポに気を付けます。