在我的 React js 应用程序中，我想实现服务器端渲染。所以我遵循了这个 repo .
现在我收到此错误。
Invariant Violation: Browser history needs a DOM
我认为这是StaticRouter错误。但我已经导入 StaticRouter 路由器并使用 renderToString 函数。但我遇到了同样的错误。
app.js(客户端根文件)
import React from "react"
import ReactDOM from "react-dom"
import AppRoot from "./routers/AppRouter"
import { AppContainer } from "react-hot-loader"
import { createStore, applyMiddleware } from 'redux';
import { Provider } from "react-redux"
import reducers from './reducers';
import reduxThunk from 'redux-thunk';
const middleware = [
reduxThunk,
];
export const store = createStore(reducers, composeWithDevTools(
applyMiddleware(...middleware),
));
function render(Component) {
ReactDOM.hydrate(
<Provider store={store}>
<AppContainer>
<Component />
</AppContainer>
</Provider>,
document.getElementById("react-root")
)
}
render(AppRoot)
if (module.hot) {
module.hot.accept("./routers/AppRouter.js", () => {
const NewAppRoot = require("./routers/AppRouter.js").default
render(NewAppRoot)
})
}
AppRouter.js(路由文件)
import React from 'react';
import {Route,BrowserRouter as Router} from 'react-router-dom';
import { Switch } from "react-router"
import history from '../components/history';
import Header from '../components/Header';
import StepOne from '../components/StepOne';
import StepTwo from '../components/StepTwo';
import StepThree from '../components/stepthree/StepThree';
import StepFour from '../components/StepFour';
import StepFive from '../components/StepFive';
import SearchID from '../components/SearchID';
import Track from '../components/track/Track';
import Payment from '../components/payment/Payment';
const AppRouter = (props) => {
return(
<div>
<Router history={history} >
<div>
<Header />
<Switch>
<Route path="/" exact component={StepOne}/>
<Route path="/steptwo" exact component={StepTwo}/>
<Route path="/stepthree" component={StepThree}/>
<Route path="/stepfour" component={StepFour}/>
<Route path="/stepfive" component={StepFive}/>
<Route path="/track" exact component={SearchID}/>
<Route path="/track/:id" component={Track} />
<Route path="/payment" exact component={SearchID} />
<Route path="/payment/:id" component={Payment} />
<Route path="/feedback" component={SearchID} />
<Route path="/:id" exact component={StepOne}/>
</Switch>
</div>
</Router>
</div>
)
}
export default AppRouter;
render.js(服务器端文件)
import React from "react"
import { renderToString } from "react-dom/server"
import { StaticRouter } from "react-router-dom"
import Routes from "../routers/AppRouter"
import { Provider } from "react-redux"
import { createStore, applyMiddleware } from 'redux';
import reducers from '../reducers';
import reduxThunk from 'redux-thunk';
const middleware = [
reduxThunk,
];
export const store = createStore(reducers,
applyMiddleware(...middleware),
);
export default () => (req, res) => {
res.send(`
<html>
<head>
<!--<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">-->
<!--<script src="https://checkout.razorpay.com/v1/checkout.js"></script>-->
</head>
<body>
<div id="react-root">${renderToString(
<Provider store={store}>
<StaticRouter location={req.originalUrl} context={{}}>
<Routes />
</StaticRouter>
</Provider>
)}
</div>
</body>
</html>
`)
}
我不知道实际问题是什么。我在 google 上搜索了很多。checked this qs 也。但没有结果。
我被困了 1 周。请帮助我如何解决这个问题。
最佳答案
我在进行 SSR 时遇到了同样的错误，因为我使用 <BrowserRouter>在 react 代码上。我通过将其更改为 <Switch> 来修复它。我之前的代码是这样的
function App() {
return (
<ApolloProvider client={client}>
<div className="App">
<BrowserRouter>
<Header/>
<Route path="/" exact component={Home}/>
<Footer/>
</BrowserRouter>
</div>
</ApolloProvider>
);
}
修复后
function App() {
return (
<ApolloProvider client={client}>
<div className="App">
<Switch>
<Header/>
<Route path="/" exact component={Home}/>
<Footer/>
</Switch>
</div>
</ApolloProvider>
);
}
关于reactjs - 浏览器历史记录需要 DOM - React 服务器端渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53929792/