سلام

من به صورت دستی Reactjs رو با استفاده از webpack کانفیگ کردم و به پروژه  Asp.net Core ام اضافه کردم.از کنترلر های Web Api میخوام استفاده کنم ولی توی React موقع لود اطلاعات   خطای 404  برای Url میده

PlantInfo Controllers

namespace PLIMO.Web_R.Areas.General.Controllers
{
    [Area("General")]
    [Route("api/[controller]")]
    [ApiController]
    public class PlantInfoController : ControllerBase
    {
        private static string[] Summaries = new[]
   {
   "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm",
   "Balmy", "Hot", "Sweltering", "Scorching"
  };
        [HttpGet("[action]")]
        public IEnumerable<WeatherForecast> WeatherForecasts()
        {
            var rng = new Random();
            return Enumerable.Range(1, 5)
            .Select(index => new WeatherForecast
            {
                DateFormatted = DateTime.Now.AddDays(index).ToString("d"),
                TemperatureC = rng.Next(-20, 55),
                Summary = Summaries[rng.Next(Summaries.Length)]
            });
        }
        public class WeatherForecast
        {
            public string DateFormatted { get; set; }
            public int TemperatureC { get; set; }
            public string Summary { get; set; }
            public int TemperatureF
            {
                get
                {
                    return 32 + (int)(TemperatureC / 0.5556);
                }
            }
        }
    }
}

Webpack.config

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");


module.exports = {
    mode:"development",
    entry: { 'main': './wwwroot/src/index.js' },
            
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default']
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "[name].css",
            chunkFilename: "[id].css"
        })

    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // you can specify a publicPath here
                            // by default it use publicPath in webpackOptions.output
                            publicPath: '../'
                        }
                    },
                    "css-loader"
                ]
            },
            {
                test: /\.js?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env',
                                  '@babel/react',{
                                  'plugins': ['@babel/plugin-proposal-class-properties']
                            }
                        ]
                    }
                }
            },
        ]
    }
};

PlantInfo Reactjs Component

import React, {Component} from 'react';
import 'es6-promise';
import 'isomorphic-fetch';

export default class PlantInfo extends Component {
    constructor() {
        super();
        this.state = { forecasts: [], loading: true };
        fetch('api/General/PlantInfo/WeatherForecasts')
            .then(response => response.json())
            .then(data => {
                this.setState({ forecasts: data, loading: false });
            });
    }
    render() {
        let contents = this.state.loading ? <p><em>Loading...</em></p>
            : PlantInfo.renderForecastsTable(this.state.forecasts);

        return <div>
            <h1>Weather forecast</h1>
            <button onClick={() => { this.refreshData() }}>Refresh</button>
            <p>This component demonstrates fetching data from the server.</p>
            {contents}
        </div>;
    }
    refreshData() {
        fetch('api/General/PlantInfo/WeatherForecasts')
            .then(response => response.json())
            .then(data => {
                this.setState({ forecasts: data, loading: false });
            });
    }
    static renderForecastsTable(forecasts) {
        return <table className='table'>
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Temp. (C)</th>
                    <th>Temp. (F)</th>
                    <th>Summary</th>
                </tr>
            </thead>
            <tbody>
                {forecasts.map(forecast =>
                    <tr key={forecast.dateFormatted}>
                        <td>{forecast.dateFormatted}</td>
                        <td>{forecast.temperatureC}</td>
                        <td>{forecast.temperatureF}</td>
                        <td>{forecast.summary}</td>
                    </tr>
                )}
            </tbody>
        </table>;
    }
}