Я пытаюсь преобразовать мое приложение 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>`
)
);
});
}
...