Реагировать на ССР с согласованными маршрутами

Question

Я новичок в теме SSR.Я пытаюсь создать сервер, который по определенному GET-запросу (/:subject/:type/:keyword/:version/:bizId) будет отображать компонент App + компонент Home на сервере и отправлять результат обработки клиенту.

Работает нормально, ноМоя проблема, когда я пытаюсь использовать BrowserRouter на стороне клиента после получения исходного содержимого.По какой-то причине компонент Link изact-router-dom пытается отправить 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

Можно использовать Создать 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