vp-webdev
6 лет назадНастройка роутинга на 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