Ruby on Rails+React/Redux报错及路由跳转404问题求助

我来帮你逐个解决这两个前端问题：

这个错误本质是代码找不到getTask函数，大概率是导入导出环节出了问题，给你几个排查和解决方向：

• 核对导出与导入的匹配性：
  如果getTask在_tasks模块里是命名导出（比如export const getTask = () => {}），那你必须用花括号导入：import { getTask } from './tasks'；如果是默认导出（export default getTask），则要去掉花括号：import getTask from './tasks'。这是新手最容易踩的坑，别搞混两种方式。
• 确认getTask函数的存在性：
  打开_tasks对应的文件，检查函数名有没有拼写错误（比如把getTask写成getTasks），或者是否真的完成了导出操作。比如正确的命名导出示例：

  // _tasks.js 中的代码
  export const getTask = (taskId) => {
    // 你的任务获取逻辑
  }
  

• 排查循环导入问题：
  如果TasksContainer组件和_tasks模块存在互相导入的情况（比如A导入B，B又导入A），会导致模块加载时getTask还未完成初始化，也会触发这个错误。这种情况需要重构模块结构，把公共逻辑抽离到独立的文件中。

看你代码里的跳转逻辑，有两个明显的问题导致了404：

• 路径格式错误：
  你使用的是browserHistory（HTML5 History模式），这种模式下的路由路径不需要加#，#是hashHistory专属的格式。你应该把跳转路径改成：

  browserHistory.push(`/tasks/${id}`);
  

  加了#之后，实际路径会变成/#/tasks/${id}，而你的路由配置大概率是/tasks/:id，自然匹配不到对应的路由规则，就会返回404。
• 多余的location.reload()调用：
  React Router是单页应用路由，跳转不需要刷新页面。刷新操作会让浏览器直接向服务器请求该路径，如果你的服务器没有配置单页应用的 fallback（比如所有路由请求都指向index.html），服务器找不到对应页面就会返回404。直接删掉这行代码即可。
• 更推荐的跳转方式：使用Link组件：
  既然你已经导入了Link组件，完全可以用它来实现跳转，这是React Router的最佳实践，代码更简洁也更可靠：

  // 在renderTasks方法的对应位置替换成Link
  <Link to={`/tasks/${task.id}`}>查看更多详情</Link>
  

  这样就不需要手动写onShowMoreTask方法了，也能避免手动调用browserHistory带来的问题。

内容的提问来源于stack exchange，提问作者user9529549