Question

我是SSR主题的新手。我正在尝试创建一个服务器，该服务器将根据特定的GET请求（/:subject/:type/:keyword/:version/:bizId）在服务器上呈现App组件+ Home组件，并将呈现的结果发送给客户端。

它工作正常，但是我的问题是当我获取初始内容后尝试在客户端上使用BrowserRouter时。由于某些原因，react-router-dom中的Link组件尝试向服务器发送GET请求，但我不知道为什么。

App.js：

const App = (props) => {
 ...some path configuration

  let paths = {
    homePath,
    servicesPath,
    aboutPath,
    contactPath
  };

  return (
    <div>
      <Header paths={paths} />
      {renderRoutes(props.route.routes)}
    </div>
  )
};

export default {
  component: App
};

Header.js：

export default props => {
  return (
    <div>
      <Link to={props.paths.homePath}>Home</Link>
      <Link to={props.paths.servicesPath}>Services</Link>
      <Link to={props.paths.aboutPath}>About</Link>
      <Link to={props.paths.contactPath}>Contact Us</Link>
    </div>
  )
}

Routes.js：

export default [
  {
    ...App,
    routes: [
      {
        ...Home,
        path: '/'
      },
      {
        ...Services,
        path: '/services'
      }
    ]
  }
];

我很乐意提供更多详细信息，只是不知道确切发布什么内容。

编辑：我很确定我的问题是Routes.js中定义的路径不是相对的，但是我不知道如何使它们相对于所请求的URL。

Answer 1

可以通过较小的调整（补丁）使用 Create React App 来支持服务器端渲染（SSR）。路线可能看起来像这样：

import Router from 'universal-router';

const routes = [
  {
    path: '/books',
    query: graphql`
      query BookListQuery {
        ...BookList
      }
    `,
    components: () => [import('./BookList')],
    render:([BookList], data) => ({
      title: 'Our Books',
      component: <BookList data={data} />
    })
  },
  {
    path: '/books/:id',
    query: graphql`
      query BookDetailsQuery($id: ID!) {
        book: node(id: $id) {
          title
          ...BookDetails
        }
      }
    `,
    components: () => [import('./BookDetails')],
    render: ([BookDetails], data) => ({
      title: data.title,
      component: <BookDetails data={data} />
    })
  },
];

export default new Router(routes, {
  resolveRoute(ctx) {
    // TODO: How each route should be handled, for example
    //       we can load application chunks and call GraphQL API
  };
});

您可以在此处找到完整的示例：

https://github.com/kriasoft/react-firebase-starter

用匹配的路由反应SSR

1 个答案: