react 和 ASP.NET Core 之间的路由答案

【问题标题】：Routing between react and ASP.NET Corereact 和 ASP.NET Core 之间的路由
【发布时间】：2021-07-18 08:00:41
【问题描述】：

我有一个任务，我必须修复错误并创建一些新功能。我一直在为 react 和 ASP.NET Core 之间的路由而苦苦挣扎。

我在启动文件中的端点是这样的

app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action}/{id?}");
            });

控制器的一些方法如下所示：

    [ApiController]
    [Route("[controller]")]
    public class FileController : ControllerBase
    {
        private readonly ILogger<FileController> _logger;
        private readonly IFileRepository _fileRepository;

        public FileController(ILogger<FileController> logger, IFileRepository fileRepository)
        {
            _logger = logger;
            _fileRepository = fileRepository;
        }

        [HttpGet]
        public Task<List<FileDetails>> Get()
        {
            return _fileRepository.GetFileDetailsAsync();
        }


[HttpGet]
public async Task<FileDetails> GetDetailedFileView(int id)
{
    FileDetails fileDetails = new FileDetails();

    if (String.IsNullOrEmpty(id.ToString()))
    {
        fileDetails = await _fileRepository.GetDetailedFileView(id);
    }

    return fileDetails;
}

[HttpGet]
public async Task<IActionResult> Delete(FileDetails fileDetails)
{
    if (fileDetails is Object)
    {
        fileDetails = await _fileRepository.DeleteFileDetailsAsync(fileDetails);
    }

    return (IActionResult)fileDetails;
}

在反应中看起来像

<Route path='/file-list' component={FileList} />

只有当我使用它才有效

[HttpGet]
public Task<List<FileDetails>> Get()
{
    return _fileRepository.GetFileDetailsAsync();
}

但从我收集的信息来看，只有 Task Action/IAction 方法应该在控制器中？

我已经搜索了好几个小时，但仍然无法理解如何正确地从后端路由这个应用程序，并避免在反应中路由或使其匹配，否则会出错，因为 json 无法构建或错误路径已分配。请帮忙。

【问题讨论】：

只要不返回禁止或错误请求等状态码，返回Task<List<FileDetails>>即可。
@RoarS。我真的可以对控制器中的所有方法都这样做吗？还是会被认为是不好的做法？

标签： asp.net reactjs asp.net-core react-router asp.net-mvc-routing

【解决方案1】：

控制器路径
正如你有[Route("[controller]")] 并且控制器被称为FileController 你当前的控制器路径是/file
如果您需要通过 /file-list 等不同路径调用 API，您可以通过更改为 [Route("/file-list")] 来设置它

按 ID 获取
如果您想通过向/file/5 请求获取特定记录，请像这样将[Route("{id:int}"] 添加到 GetDetailedFileView

[HttpGet]
[Route("{id:int}"]
public async Task<FileDetails> GetDetailedFileView(int id)
{
    FileDetails fileDetails = new FileDetails();

    fileDetails = await _fileRepository.GetDetailedFileView(id);

    return fileDetails;
}

删除
使用 [HttpDelete] 而不是 [HttpGet] 对 DELETE HTTP 动词进行操作

[HttpDelete]
public async Task<IActionResult> Delete(FileDetails fileDetails)
{
    if (fileDetails is Object)
    {
        fileDetails = await _fileRepository.DeleteFileDetailsAsync(fileDetails);
    }

    return (IActionResult)fileDetails;
}

【讨论】：