Настройка роутинга на ReactJS в ssr приложении

Если ваш сайт не лендинг, то у него не сколько страниц. Сегодня разберём как "гулять" по нашему сайту. Настроим роутинг на сервере и на клиенте.

Продолжим наш проект, описанный в этой статье.

Для начала установим react-router и react-router-dom:

npm i -s react-router react-router-dom

Далее идём в наш server.js
Сначала импортируем:

import { StaticRouter } from   'react-router';

И исправим рендер:

template({ body: renderToString(<App />) })

на

template({
 body:   renderToString(
 <StaticRouter
 location={req.url}
 context={context}
 >
 <Routers   />
 </StaticRouter>
)
})

StaticRouter - необходим для рендеринга на сервере. На клиенте используется BrowserRouter.
В свою очередь BrowserRouter - это , использующий API истории HTML5.
Как видите, появился компонент Routers. Создадим его.

export   const   Routers   = () => {
 return(
 <Switch>
 <Route   path="/about"   component={   About   }   />
 <Route   path="/subjects"   component={   Subjects   }   />
 <Route   path="/"   component={   Index   }   />
 </Switch>
)
}

Switch - компонент группирования Router'ов.
Как видим обычный роутинг.
Не забудем создать и импортировать необходимые компоненты и

import { BrowserRouter   as   Router, Route, Switch } from   'react-router-dom'

Материал подготовлен автором @zheev