Question

在我的react js应用中，我想实现服务器端渲染。因此，我遵循了repo。
现在我遇到这个错误。

永久违反：浏览器历史记录需要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上搜索了很多。也检查了this qs，但没有结果。
我被困了1周 >。请任何帮助我解决该问题的方法。

Answer 1

执行SSR时遇到相同的错误，因为我在React代码上使用<BrowserRouter>。我通过将其更改为<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>
    );
}

Answer 2

我不得不用<Switch>将<BrowserRouter>包起来，然后才行。

`ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <App />
        </Switch>
    </BrowserRouter>,
    document.getElementById("root")
);`

浏览器历史记录需要DOM-反应服务器端渲染

2 个答案: