问题：

浏览器历史记录需要DOM-react服务器端呈现

龙高歌

2023-03-14

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

不变冲突：浏览器历史记录需要DOM

我以为这是错误。但是我已经导入了StaticRouterrouter并使用了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)
})
}

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;

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这个qsalso.but没有结果。我被困在1week.please任何帮助我解决这个问题。

共有2个答案

东方弘壮

2023-03-14

我必须包装

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

拓拔野

2023-03-14

我在执行SSR时遇到了相同的错误，因为我使用的是

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>
    );
}

类似资料：

服务器渲染-反应路由器Dom V^5.2.0错误：不变失败：浏览器历史需要一个DOM

我是React的初学者，遇到了一些问题。我正在使用服务器渲染并使用express作为服务器，收到一条错误消息：错误：不变量失败：浏览器历史记录需要DOM。我已经检查了来自不同站点的fro解决方案，并应用了它们的解决方案，但在应用不同的解决方案时会出现不同的错误。如前所述，我收到一个错误：TypeError:无法读取未定义的属性'location'，为此，我通过从'react Router dom'
在Ajax中管理浏览器历史记录

问题内容：我在网站上使用ajax。如果用户输入查询并选择类别，我将使用ajax更新结果页面。我还用哈希值更新了url，该值显示了以分隔的查询和类别。我想要的是，当按下浏览器的后退按钮时，我希望不重新加载就显示以前的结果。我得到的是该URL具有先前的值，但结果未更新。问题答案：您可以使用：“ Yahoo! UI库：浏览器历史记录管理器 ”
反应路由器不显示浏览器历史记录

问题内容：我正在从本教程中学习，但始终收到此错误： “ react-router”不包含名为“ browserHistory”的导出。具有react-router的文件是这样的：问题答案：您现在需要从历史记录模块中获取。请注意，他们最近更改了模块API，因此，如果您使用的是最新版本，则导入会稍有变化：
php浏览历史记录的方法

本文向大家介绍php浏览历史记录的方法，包括了php浏览历史记录的方法的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了php浏览历史记录的方法。分享给大家供大家参考。具体实现方法如下：希望本文所述对大家的php程序设计有所帮助。
具有浏览器历史记录/标签的PrimeFaces Ajax导航

问题内容：我已经实现了一个单页设计的Web应用程序。基本上只加载一个页面，然后使用AJAX更新中心内容。代码如下：这基本上是可行的，但我也想启用浏览器导航。例如：http：//ticketmonster- jdf.rhcloud.com/，网址上带有＃标签。因此，使用后退/前进按钮，我可以转到等效选项。任何想法如何做到这一点？问题答案：我创建了一个博客文章，根据您的问题解释如何使用jQue
如何获取Icecast服务器歌曲历史记录

另外，如果我在浏览器上访问，它在web界面中只显示当前歌曲。有人能指导我如何完成这件事吗？

浏览器历史记录需要DOM-react服务器端呈现

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档