title: 404 on webapi custom route
body: <p>I am really struggling with this</p>
  
  <p>I have an action controller like this:</p>
  
  <pre><code>[HttpPost]
      [Route("api/SiteCollections/SetSiteCollectionActive")]
      public async Task&lt;IHttpActionResult&gt; SetSiteCollectionActive(string siteCollectionUrl)
      {
          var siteCollectionsStore = CosmosStoreFactory.CreateForEntity&lt;TenantManagementWebApi.Entities.SiteCollection&gt;();
          var allSiteCollections = await siteCollectionsStore.Query().Where(x =&gt; x.Title != null).ToListAsync();
          foreach (TenantManagementWebApi.Entities.SiteCollection sc in allSiteCollections)
          {
              sc.Active = false;
              await siteCollectionsStore.UpdateAsync(sc);
          }
  
          var siteCollection = await siteCollectionsStore.Query().FirstOrDefaultAsync(x =&gt; x.Id == siteCollectionUrl);
          if (siteCollection == null)
          {
              return NotFound();
          }
  
          siteCollection.Active = true;
          var result = await siteCollectionsStore.UpdateAsync(siteCollection);
  
          return Ok(result);
      }
  </code></pre>
  
  <p>and from a reactjs application, I am trying to do the following:</p>
  
  <pre><code>// rowSelection object indicates the need for row selection
          const rowSelection = {
              onChange: (selectedRowKeys, selectedRows) =&gt; {
                  if(selectedRows[0].Url != undefined){
                      console.log(selectedRows[0].Url);
                      const options = { 
                          method: 'post'
                      };
  
                      adalApiFetch(fetch, "/SiteCollections/SetSiteCollectionActive?siteCollectionUrl="+selectedRows[0].Url.toString(), options)
                          .then(response =&gt;{
                          if(response.status === 200){
                              Notification(
                                  'success',
                                  'Site Collection set to active',
                                  ''
                                  );
                          }else{
                              throw "error";
                          }
                          })
                          .catch(error =&gt; {
                          Notification(
                              'error',
                              'Site Collection not activated',
                              error
                              );
                          console.error(error);
                      });
                  }
              },
              getCheckboxProps: record =&gt; ({
                  type: Radio
              }),
          };
  
          return (
              &lt;Table rowSelection={rowSelection} columns={columns} dataSource={this.state.data} /&gt;
          );
  </code></pre>
  
  <p>However, I always get this error:</p>
  
  <p><a href="https://i.stack.imgur.com/f2UIs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f2UIs.png" alt="enter image description here"></a></p>
  
  <p>everything seems correct</p>
  
  <p>Route Config</p>
  
  <pre><code>  public class RouteConfig
      {
          public static void RegisterRoutes(RouteCollection routes)
          {
              routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  
              routes.MapRoute(
                  name: "Default",
                  url: "{controller}/{action}/{id}",
                  defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
              );
          }
      }
  </code></pre>