Question

当我浏览www.localhost.com:8080/abc时 - 正在调用主要组件fetchMethod - 并且正在加载具有路径路径的下一个组件'One'：'/ abc /：param' - 当我控制台输出服务器代码 - 下面是我在server.js和routes.js中的路由设置 - 这是一个服务器端渲染应用程序 - 每个组件都有fetchData ..对于一个路由调用2个组件可能是我的问题？

Answer 1

我尝试在代码段中尽可能地模拟代码。对于每个请求，函数返回预期路由和预期组件。

为了进行此演示工作，我注释了component.fetchData并且它有效，因此component.fetchData可能导致问题。也许Main.fetchData正在向/abc/:param路线提出请求？

如果component.fetchData不是罪魁祸首，我会调查node控制台，看看是否确实要求/abc/:param。

如果没有请求/abc/:param路由，则可能与Express设置有关。如果是这种情况，我们需要查看更多代码。

＆＃13;

const handleRoute = function(req, res, next) {
  let {
    path,
    component
  } = routes.find(
    ({
      path,
      exact
    }) => {
      foundPath = ReactRouter.matchPath(req.url, {
        path,
        exact,
        strict: false
      });
      return foundPath;
    }) || {};
  component.fetchData()
  return {path, component} 
  //component.fetchData = () => new Promise((resolve, reject) => resolve());
  
}

class Main extends React.Component {
  static fetchData({ store }) {
    console.log('fetching data');
    return store.dispatch(actions.getMainData());
  }

  componentWillMount() {
    this.props.getMainData();
  }
}

const routes = [{
    path: '/abc',
    component: Main,
    exact: true,
  },
  {
    path: '/abc/:param',
    component: 'One',
    exact: true,
  },
  {
    path: '/abc/def/:param',
    component: 'Two',
    exact: true,
  }
];

handleRoute({url: "/abc"});
handleRoute({url: "/abc/123"});
handleRoute({url: "/abc/def/123"});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.2.0/react-router.min.js"></script>

＆＃13;

React matchRoutes - 服务器端呈现匹配多个路由

1 个答案: