Question

我正在尝试使用react-router 4进行服务器端渲染。我按照此处提供的示例https://reacttraining.com/react-router/web/guides/server-rendering/putting-it-all-together

根据服务器上的示例，我们应该使用StaticRouter。当我按照示例导入时，我将StaticRouter视为未定义

import {StaticRouter} from 'react-router';

在网上进行一些研究后，我发现我可以使用react-router-dom。现在我的import语句看起来像这样。

import {StaticRouter} from 'react-router-dom';

但是，当我运行代码时，我在浏览器中收到Invariant Violation: Browser history needs a DOM。

我的server.js文件代码

....
app.get( '*', ( req, res ) => {
  const html = fs.readFileSync(path.resolve(__dirname, '../index.html')).toString();
  const context = {};
  const markup = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context} >
      <App/>
    </StaticRouter>
  );

  if (context.url) {
    res.writeHead(302, {
      Location: context.url
    })
    res.end();
  } else {
      res.send(html.replace('$react', markup));
  }
} );
....

我的client / index.js代码

....
ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), root);
....

更新v1 将我的例子减少到最小值并仍然得到相同的错误。

clientIndex.js

import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from '../App'

ReactDOM.render((
  <BrowserRouter>
    <App/>
  </BrowserRouter>
), document.getElementById('app'))

serverIndex.js

import { createServer } from 'http'
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { StaticRouter } from 'react-router'
import App from '../App'

createServer((req, res) => {
  const context = {}

  const html = ReactDOMServer.renderToString(
    <StaticRouter
      location={req.url}
      context={context}
    >
      <App/>
    </StaticRouter>
  )

res.write(`
  <!doctype html>
  <div id="app">${html}</div>
`)
res.end()
}).listen(3000);

App.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import routes from "./client/routes";
const App = ( ) => (
  <Router>
    <Route path="/" exact render={( props ) => ( <div>Helloworld</div> )} />
  </Router>
)

export default App;

Answer 1

您需要使用其他历史记录提供程序进行服务器端渲染，因为服务器上没有真实的DOM（和浏览器的历史记录）。因此，在您的app.js中用Router和备用历史记录提供程序替换BrowserRouter可以解决此问题。另外，您不必使用两个包装器。您在app.js和clientIndex.js中都使用了BrowserRouter两次，这是不必要的。

import { Route, Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';

const history = createMemoryHistory();

  <Router history={history}>
   <Route path="/" exact render={( props ) => ( <div>Helloworld</div> )} />
  </Router>

现在，您可以用ConnectedRouter替换StaticRouter，后者可以在客户端和服务器中使用。我使用以下代码在历史记录之间进行选择并导出以在ConnectedRouter的历史记录中使用。

export default (url = '/') => {
// Create a history depending on the environment
  const history = isServer
    ? createMemoryHistory({
        initialEntries: [url]
     })
   : createBrowserHistory();
}

Answer 2

在clientIndex.js中

使用StaticRouter而不是BrowserRouter。

从“ react-router-dom”导入{BrowserRouter};

从“ react-router-dom”导入{StaticRouter}

Answer 3

正如在评论中已经注意到的那样，人们可能会在<BrowserRouter>中意外包装您的应用组件时遇到此错误（正如我所知），而不是您的客户端应用应该被包裹。

App.js

import React from 'react'

const App = () => <h1>Hello, World.</h1>

export default App

ClientApp.js

import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import ReactDOM from 'react-dom'
import App from './App'

const render = Component => {
  ReactDOM.render(
    <BrowserRouter>
      <Component />
    </BrowserRouter>,
    document.getElementById('app')
  )
}

render(App)

另请参阅React Router docs。

react-router 4 - 浏览器历史记录需要DOM

3 个答案:

App.js

ClientApp.js