в моем приложении реагировать на js. Я хочу реализовать рендеринг на стороне сервера. Поэтому я следовал этому репо .
, сейчас я получаю эту ошибку.
Нарушение инварианта: история браузера требует 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 недели . Пожалуйста, помогите мне, как я могу решить эту проблему.