[英]React Router - Browser History needs a dom
我正在使用React.js並為我的應用程序表達。 我正在嘗試為該應用設置react-router-dom。
但是，當我嘗試運行該應用程序時，收到警告：
Invariant Violation: Browser history needs a DOM at invariant (/home/jshen/playlistTracker/node_modules/invariant/invariant.js:40:15) at createBrowserHistory (/home/jshen/playlistTracker/node_modules/history/createBrowserHistory.js:49:27) at new BrowserRouter (/home/jshen/playlistTracker/node_modules/react-router-dom/BrowserRouter.js:46:197) at processChild (/home/jshen/playlistTracker/node_modules/react-dom/cjs/react-dom-server.node.development.js:2095:14) at resolve (/home/jshen/playlistTracker/node_modules/react-dom/cjs/react-dom-server.node.development.js:2061:5) at ReactDOMServerRenderer.render (/home/jshen/playlistTracker/node_modules/react-dom/cjs/react-dom-server.node.development.js:2380:22) at ReactDOMServerRenderer.read (/home/jshen/playlistTracker/node_modules/react-dom/cjs/react-dom-server.node.development.js:2354:19) at renderToString (/home/jshen/playlistTracker/node_modules/react-dom/cjs/react-dom-server.node.development.js:2726:25) at handleRender (/home/jshen/playlistTracker/dist/server.js:755:41) at Layer.handle [as handle_request] (/home/jshen/playlistTracker/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/home/jshen/playlistTracker/node_modules/express/lib/router/index.js:317:13) at /home/jshen/playlistTracker/node_modules/express/lib/router/index.js:284:7 at Function.process_params (/home/jshen/playlistTracker/node_modules/express/lib/router/index.js:335:12) at next (/home/jshen/playlistTracker/node_modules/express/lib/router/index.js:275:10) at expressInit (/home/jshen/playlistTracker/node_modules/express/lib/middleware/init.js:40:5) at Layer.handle [as handle_request] (/home/jshen/playlistTracker/node_modules/express/lib/router/layer.js:95:5)
App.jsx
import React, {Component, Fragment} from 'react'; import {BrowserRouter, Switch, Route } from 'react-router-dom' import { NavBar } from './layouts' import Main from './main' class App extends Component { constructor(props){ super(props); this.state = { currentUser: {name: "testUser"}, favourite: [], playlist: [] }; } render() { return ( <BrowserRouter> <NavBar> <Switch> <Route exact path ="/" render={ () => <div> hello </div> }/> </Switch> </NavBar> </BrowserRouter> ) } } export default App;
server.js
import express from 'express'; import React from 'react'; import App from '../client/App.jsx'; import { renderToString } from 'react-dom/server' import { SheetsRegistry } from 'react-jss/lib/jss' import JssProvider from 'react-jss/lib/JssProvider' import { MuiThemeProvider, createMuiTheme, createGenerateClassName, } from '@material-ui/core/styles' const app = express(); const port = 3000; // This is fired every time the server side receives a request. app.use(handleRender); app.listen(port); // inject our initial component HTML and CSS into a template to be rendered on the client side. function renderFullPage(html, css) { return ` <!doctype html> <html> <head> <title>Material-UI</title> </head> <body> <div id="root">${html}</div> <style id="jss-server-side">${css}</style> </body> </html> `; } // When rendering, we will wrap App, our root component, inside a JssProvider and MuiThemeProvider // to make the sheetsRegistry and the theme available to all components in the component tree. // Render the initial HTML of our component before we send it to the client side. // To do this, we use ReactDOMServer.renderToString(). function handleRender(req, res) { // Create a sheetsRegistry instance. const sheetsRegistry = new SheetsRegistry(); // Create a theme instance. const theme = createMuiTheme({ palette: { primary: { light: '#757575', main: '#a4a4a4', dark: '#494949', contrastText: '#ffffff', }, secondary: { light: '#263238', main: '#a4a4a4', dark: '#494949', contrastText: '#ffffff', }, // accent: red, // type: 'light', }, }); const generateClassName = createGenerateClassName(); // Render the component to a string. const html = renderToString( <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}> <MuiThemeProvider theme={theme} sheetsManager={new Map()}> <App /> </MuiThemeProvider> </JssProvider> ) // Grab the CSS from our sheetsRegistry. const css = sheetsRegistry.toString() // Send the rendered page back to the client. res.send(renderFullPage(html, css)) }
無法弄清楚我所缺少的。 我認為這可能是由於服務器端的某些原因造成的，但無法弄清楚。
我已經讀到它可能是由於歷史記錄組件引起的，但是，我已經看到了它僅與BrowerRouter一起工作的示例。（例如https://github.com/jsmegatools/React-online-course/tree/master/Lesson-2 ）
謝謝！
您需要正確設置。 兩者互不相同。 React是客戶端應用程序，而Express是服務器應用程序。
看看Sandeep Raveesh的帖子 ，然后嘗試樣板 。 它可以幫助您理解它。
@Tholle的回答幫助我解決了問題。
https://reacttraining.com/react-router/web/guides/server-rendering
服務器渲染-React Router Dom V^5.2.0 Error: Invariant failed: Browser history needs a DOM
[英]Server Rendering-React Router Dom V^5.2.0 Error: Invariant failed: Browser history needs a DOM
React Router：瀏覽器歷史的目的是什么？ 瀏覽器歷史是強制性的
[英]React Router: What's the purpose of Browser History? Is Browser History mandatory?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.