用匹配的路由反应 SSR答案

【问题标题】：React SSR with matched routes用匹配的路由反应 SSR
【发布时间】：2019-02-28 11:45:30
【问题描述】：

我是 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。

【问题讨论】：

你在使用像 NextJS 这样的库来实现 SSR 吗？
不，我不使用 nextJS。我发现它很不方便。
什么？怎么会不方便？ NextJS 是 React 最好、最常用的 SSR 库。你说你是 SSR 的新手，更多的是使用它的理由。反正我不想跑题。如果您的路由器正在向您的服务器发出请求，则意味着您的应用不了解客户端和服务器之间的区别。
也许我离开 NextJS 太快了。你认为用 NextJS 实现我需要的东西会更容易吗？

标签： javascript reactjs react-router server-side-rendering

【解决方案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

【讨论】：