React-роутер и ссылка в рендеринге на стороне сервера

Question

Я конвертирую приложение реагирования для рендеринга на стороне сервера.

У меня есть такие вещи: import React from 'react' import R, { Link } from 'react-router' console.log("router:", R) // R is undefined! class C1 extends React.Component { render () { return (<Link to="/somewhere">somewhere</Link>) } }

Раньше это работало, но теперь react-router на сервере не определено. Я установил его: npm install --save react-router, версия ^ 4.2.0.

Как бы заставить ссылки работать с серверной и клиентской реакцией? Я знаю, что могу сделать это: import { NavLink } from 'react-router-dom' и использовать NavLink вместо Link. Однако это приводит к вызову на стороне сервера при каждом нажатии ссылки. Я бы хотел, чтобы реакция на стороне клиента использовала, возможно, pushstate и не обращалась к серверу после начальной загрузки.

Answer 1

попробуйте добавить в npm npm install -g react-router-dom затем import { BrowserRouter, Link, Route, Router, Switch} from 'react-router-dom';

код будет:

import React from 'react';
import { BrowserRouter, Link, Route, Router, Switch} from 'react-router-dom';

<BrowserRouter>
  <Link to='/' >Home</Link>
  <switch>
    <Route path='/' exact render={(props) => <`your component` />}>
  </switch>
</BrowserRouter>