服務器渲染-React Router Dom V^5.2.0 Error: Invariant failed: Browser history needs a DOM

Question

我是 React 的初學者並且遇到了一些問題。我正在使用服務器渲染並使用 express 作為服務器並收到錯誤消息：錯誤：不變失敗：瀏覽器歷史記錄需要 DOM。 我已經檢查了來自各個站點的解決方案並應用了他們的解決方案，但是在應用不同的解決方案時遇到了不同的錯誤。 如前所述，我收到一個錯誤： TypeError: Cannot read property 'location' of undefined for this 我通過從'react-router-dom 導入 -import { BrowserRouter as Router } 將路由器更改為 BrowserRouter ，之后我得到以下內容錯誤。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Route from 'react-router-dom';

import App from './components/App';

ReactDOM.hydrate(
 <Router><App /></Router> ,
  document.getElementById('mountNode'),
);

應用程序.js

import React, { useState } from 'react';
import {Route,Switch,browserHistory} from "react-router-dom";
import { BrowserRouter as Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';


import HomePage from './HomePage';
import About from './About';
export default function App()
{

//const history = createMemoryHistory();
    return (
    <Router history={browserHistory}> 
        <Switch>
            <Route path="/" exact component={HomePage}/>
            <Route path="/about" component={About}/>  
        </Switch>
    </Router>
    );
}

錯誤

Error: Invariant failed: Browser history needs a DOM
at invariant (C:\LMS-APP\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:13:11)
at Object.createHistory [as createBrowserHistory] (C:\LMS-APP\node_modules\history\cjs\history.js:273:16)
at new BrowserRouter (C:\LMS-APP\node_modules\react-router-dom\modules\BrowserRouter.js:11:13)
at processChild (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:2995:14)
at resolve (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
at ReactDOMServerRenderer.render (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
at ReactDOMServerRenderer.read (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
at Object.renderToString (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)
at C:\LMS-APP\src\server\/server.js:10:40
at Layer.handle [as handle_request] (C:\LMS-APP\node_modules\express\lib\router\layer.js:95:5)

package.json

{
  "name": "LMS-APP",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   "dev-server": "nodemon --exec babel-node src/server/server.js --ignore dist/",
   "dev-bundle": "webpack -w -d"
  },
     "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.9.6",
    "@babel/node": "^7.8.7",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "express": "^4.17.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.0.0",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^4.0.2",
    "nodemon": "^2.0.4"
  }
}

Answer 1

由於您使用 express.js 作為服務器，我相信您還需要配置您的 server.js 代碼。 由於底部的錯誤日志告訴第一個被調用的文件at C:\LMS-APP\src\server\/server.js:10:40 。

在這個網站https://reacttraining.com/react-router/web/guides/server-rendering有一個“把它放在一起”部分，您也可以在您的服務器端代碼中遵循和實施正確的代碼。 請記住將其調整為 server.js 上的代碼，因為您使用的是 express.js。

還要注意網站的代碼示例。 像這個塊：

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

上面的代碼片段將放置在您的 server.js 文件中。

需要 React Router 的<StaticRouter>組件來解決有關“錯誤：不變失敗：瀏覽器歷史記錄需要 DOM”的錯誤。

server.get("*", (req, res) => {
  // Render the component to a string.
  const html = ReactDOMServer.renderToString(    
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>

  );
  const finalDocument =`<html>
                          <head>
                            <title>Your App Title</title>
                          </head>
                          <body>
                            <div id="root">${html}</div>
                          </body>
                         </html>
                        `;
    res.send(finalDocument);
  }
});

這將是您的 server.get() function 的示例代碼。 server 變量保存 express 應用程序。

如果錯誤仍然存在，您應該將 server.get() function 中的第一個參數從server.get("/", ....)更改為server.get("*", ....) 。

* 星號表示通配符，表示對服務器的任何訪問或默認 URL 將由您的服務器端處理，例如GET http://localhost:<port> 。

服務器渲染-React Router Dom V^5.2.0 Error: Invariant failed: Browser history needs a DOM

問題描述

1 個解決方案

解決方案1
0 2020-06-29 07:17:01

服務器渲染-React Router Dom V^5.2.0 Error: Invariant failed: Browser history needs a DOM

問題描述

1 個解決方案

解決方案1 0 2020-06-29 07:17:01

解決方案1
0 2020-06-29 07:17:01