ReactJS SSR BrowserRouter Проблема - PullRequest
       3

ReactJS SSR BrowserRouter Проблема

0 голосов
/ 14 февраля 2019

Я пытаюсь преобразовать мое приложение CRA ReactJS в SSR.Я следую руководству, поэтому я не знаю всех его аспектов.Так что моя проблема в том, что он выдает ошибку ниже:

Invariant Violation: Browser history needs a DOM

Я понимаю, что мне нужно удалить BrowserRoute, но в то же время мне нужно его использовать (если любая альтернатива будет в порядке).Я выполнил поиск и нашел много подобных проблем, но ни одна из них не сработала на моей стороне.

Вот мой App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
require('dotenv').config();

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ...
    }
  }
  render() {
    return (
      <Router>
        ...
        <li className="nav-item">
           <Link to={'/'} className="nav-link">Page1</Link>
         </li>
         <li className="nav-item">
           <Link to={'/page2'} className="nav-link">Page2</Link>
         </li>
        ...
          <Switch>
            <Route exact path='/' component={page1} />
            <Route exact path='/page2' component={page2} />
          </Switch>
       ...
      </Router>
    );
  }
}

export default App;

И сервер js

import React from 'react'
import ReactDOMServer from 'react-dom/server'
import App from '../../src/App';
import { StaticRouter } from "react-router";

...
export default (req, res, next) => {
    const filePath = path.resolve(__dirname, '..', '..', 'build', 'index.html');
    fs.readFile(filePath, 'utf8', (err, htmlData) => {
        if (err) {
            console.error('err', err);
            return res.status(404).end()
        }
        const context = {};
        const html = ReactDOMServer.renderToString(
            <StaticRouter location={req.url} context={context}>
                <App />
            </StaticRouter>
        );
        return res.send(
            htmlData.replace(
                '<div id="root"></div>',
                `<div id="root">${html}</div>`
            )
        );
    });
}
...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...