Reactjs 浏览器历史记录需要一个DOM（react router 4）_Reactjs_React Router_React Redux_React Router V4_Server Side Rendering

Reactjs 浏览器历史记录需要一个DOM（react router 4）

reactjs

Reactjs 浏览器历史记录需要一个DOM（react router 4）,reactjs,react-router,react-redux,react-router-v4,server-side-rendering,Reactjs,React Router,React Redux,React Router V4,Server Side Rendering,我正在尝试在react应用程序中实现服务器端渲染。我无法使用react、react DOM和react router的服务器实现访问DOM。我要么有“浏览器历史记录需要DOM”错误所以我猜我在服务器端或客户端包装组件的方式有问题我将分享我的结构和参与此练习的重要文件 server.js import React from 'react'; import { renderToString } from 'react-dom/server'; // import { StaticRouter }

我正在尝试在react应用程序中实现服务器端渲染。我无法使用react、react DOM和react router的服务器实现访问DOM。我要么有“浏览器历史记录需要DOM”错误

所以我猜我在服务器端或客户端包装组件的方式有问题

我将分享我的结构和参与此练习的重要文件

server.js

import React from 'react';
import { renderToString } from 'react-dom/server';
// import { StaticRouter } from 'react-router';
import {StaticRouter} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { ConnectedRouter, routerMiddleware } from 'react-router-
redux';
import { multiClientMiddleware } from 'redux-axios-middleware';
import api from "../src/actions/api";
import rootReducer from "../src/reducers/index";
import routes from '../src/routes/routes';

const app = express();

app.use(express.static('public'));

app.get('*', (req,res)=>{

const axiosMiddlewareOptions = {
    interceptors: {
        request: [
            (action, config) => {
                if (sessionStorage.token) {
                    config.headers['Authorization'] = 'Token '+ sessionStorage.token;
                }

                return config
            }
        ]
    }
};
const history = createBrowserHistory();
const appRouterMiddleware = routerMiddleware(history);
const createStoreWithMiddleware = 
applyMiddleware(multiClientMiddleware(api, axiosMiddlewareOptions), 
appRouterMiddleware)(createStore);
const store = createStoreWithMiddleware(rootReducer, {}, 
window.devToolsExtension ? window.devToolsExtension() : f => f);

const context = {};
const html = renderToString(
    <Provider store={store}>
        <StaticRouter location={req.url} context={context}>
            <ConnectedRouter history={history} children={routes}/>
        </StaticRouter>
    </Provider>
);

res.send(`
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <base href="/"/>
            <link href="assets/img/favikin-hw.png" rel="shortcut 
 icon" type="image/x-icon" />
            <meta name="viewport" content=" width=device-width, 
 maximum-scale=1">
        </head>

        <body>
            <div class="wrapper">${html}</div>
        </body>

    </html>

`)
});

app.listen(process.env.PORT || 8080, ()=>{
   console.log('Server is Listening')
});

从“React”导入React；
从'react dom/server'导入{renderToString}；
//从“react router”导入{StaticRouter}；
从“react router dom”导入{StaticRouter}；
从“历史记录/createBrowserHistory”导入createBrowserHistory；
从'react redux'导入{Provider}；
从“redux”导入{createStore，applyMiddleware}；
从“react router”导入{ConnectedRouter，routerMiddleware}-
雷多克斯'；
从“redux axios中间件”导入{multiClientMiddleware}；
从“./src/actions/api”导入api；
从“./src/reducers/index”导入rootReducer；
从“../src/routes/routes”导入路由；
常量app=express（）；
应用程序使用（express.static（'public'））；
应用程序获取（“*”，（请求，请求）=>{
常量axiosMiddlewareOptions={
拦截器：{
请求：[
（操作、配置）=>{
if（sessionStorage.token）{
config.headers['Authorization']='Token'+sessionStorage.Token；
}
返回配置
}
]
}
};
const history=createBrowserHistory（）；
const appRouterMiddleware=routerMiddleware（历史）；
const createStoreWithMiddleware=
applyMiddleware（多客户端Middleware（api、axiosMiddlewareOptions），
认可中间件（createStore）；
const store=createStoreWithMiddleware（rootReducer，{}，
window.devToolsExtension？window.devToolsExtension（）：f=>f）；
const context={}；
常量html=renderToString(
);
res.send(`
标题
${html}
`)
});
app.listen（process.env.PORT | | 8080，（）=>{
console.log（'服务器正在侦听'）
});

index.js

import React from 'react';
import { render } from 'react-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { ConnectedRouter, routerMiddleware } from 'react-router-redux';
import { multiClientMiddleware } from 'redux-axios-middleware';
import api from "./actions/api";
import rootReducer from "./reducers/index";
import routes from './routes/routes';
import { BrowserRouter } from 'react-router-dom';

import '../assets/css/bootstrap.min.css';
import '../assets/style.css';
import '../node_modules/react-datetime/css/react-datetime.css';
import '../node_modules/react-select/dist/react-select.min.css';

const axiosMiddlewareOptions = {
    interceptors: {
    request: [
        (action, config) => {
            if (sessionStorage.token) {
                config.headers['Authorization'] = 'Token '+     sessionStorage.token;
            }

            return config
        }
    ]
    }
};
const history = createBrowserHistory();
const appRouterMiddleware = routerMiddleware(history);
const createStoreWithMiddleware =     applyMiddleware(multiClientMiddleware(api, axiosMiddlewareOptions),     appRouterMiddleware)(createStore);
const store = createStoreWithMiddleware(rootReducer, {},     window.devToolsExtension ? window.devToolsExtension() : f => f);

render(
    <Provider store={store}>
        <ConnectedRouter history={history} children={routes}/>
    </Provider>,
document.querySelector('.wrapper'));

从“React”导入React；
从'react dom'导入{render}；
从“历史记录/createBrowserHistory”导入createBrowserHistory；
从'react redux'导入{Provider}；
从“redux”导入{createStore，applyMiddleware}；
从“react router redux”导入{ConnectedRouter，routerMiddleware}；
从“redux axios中间件”导入{multiClientMiddleware}；
从“/actions/api”导入api；
从“/reducers/index”导入rootReducer；
从“./routes/routes”导入路由；
从“react router dom”导入{BrowserRouter}；
导入“../assets/css/bootstrap.min.css”；
导入“../assets/style.css”；
导入“../node_modules/react datetime/css/react datetime.css”；
导入“../node_modules/react select/dist/react select.min.css”；
常量axiosMiddlewareOptions={
拦截器：{
请求：[
（操作、配置）=>{
if（sessionStorage.token）{
config.headers['Authorization']='Token'+sessionStorage.Token；
}
返回配置
}
]
}
};
const history=createBrowserHistory（）；
const appRouterMiddleware=routerMiddleware（历史）；
const createStoreWithMiddleware=applyMiddleware（多客户端Middleware（api、axiosMiddlewareOptions）、appRouterMiddleware）（createStore）；
const store=createStoreWithMiddleware（rootReducer，{}，window.devToolsExtension？window.devToolsExtension（）：f=>f）；
渲染(
,
document.querySelector（'.wrapper'）；

App.js

import React, { Component, PropTypes } from "react";
import Header from '../components/Header/Header';
import Footer from '../components/Footer/Footer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

class App extends Component {
    render() {
        return (
        <MuiThemeProvider>
            <div className="wrapper-box">
                <div className="inner-wrapper">
                    <Header/>
                    {this.props.children}
                </div>
                <Footer/>
            </div>
        </MuiThemeProvider>
    );
    }
}

App.propTypes = {
    children: PropTypes.object.isRequired
};

export default App;

import React，{Component，PropTypes}来自“React”；
从“../components/Header/Header”导入标题；
从“../components/Footer/Footer”导入页脚；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
类应用程序扩展组件{
render（）{
返回(
{this.props.children}
);
}
}
App.propTypes={
子项：PropTypes.object.isRequired
};
导出默认应用程序；

routes.js

import React from 'react';
import App from '../containers/App';
import {
    Route,
    Switch
} from 'react-router-dom';
import MainPage from '../containers/MainPage/MainPage';
import DetailPage from '../components/DetailPage/DetailPage';
import AboutProject from '../containers/AboutProject/AboutProject';
import Contacts from '../containers/Contacts/Contacts';
import SectionPage from '../containers/SectionPage/SectionPage';
import SearchPage from '../containers/SearchPage/SearchPage';
import NoMatch from '../containers/NoMatch/NoMatch';


export default (
<App>
    <div>
        <Switch>
            <Route exact={true} path='/' component={MainPage} />
            <Route path='/about_the_project' component={AboutProject} />
            <Route path='/contacts' component={Contacts} />
            <Route path="/search-results/:category/:term" component={SearchPage}/>
            <Route exact={true} path='/:name' component={SectionPage} />
            <Route path="/articles/:slug" component={DetailPage}/>
            <Route path="/events/:slug" component={DetailPage}/>
            <Route path="/news/:slug" component={DetailPage}/>
            <Route path="/interviews/:slug" component={DetailPage}/>
            <Route path="/technologies/:slug" component={DetailPage}/>
            <Route path='*' component={NoMatch}/>
        </Switch>
    </div>
    </App>
)

从“React”导入React；
从“../containers/App”导入应用程序；
进口{
路线,，
转换
}从“反应路由器dom”；
从“../containers/MainPage/MainPage”导入主页；
从“../components/DetailPage/DetailPage”导入DetailPage；
从“../containers/AboutProject/AboutProject”导入AboutProject；
从“../containers/Contacts/Contacts”导入联系人；
从“../containers/SectionPage/SectionPage”导入SectionPage；
从“../containers/SearchPage/SearchPage”导入SearchPage；
从“../containers/NoMatch/NoMatch”导入NoMatch；
导出默认值(
)

我还没有时间测试它，但是ConnectRouter有一个名为isSSR的道具，它可以阻止订阅一个只有DOM的东西。（）

我猜你现在可以用

记忆历史了。（）
将尝试在周末启动一个示例应用程序。
错误已通过使用createMemoryHistory（）解决
const history=createMemoryHistory（）
 您真的需要在您的服务器代码中包含从“history/createBrowserHistory”导入createBrowserHistory的行吗？我认为这是执行失败的地方（大概是在服务器运行之后）。因为如果没有，它应该在window.devToolsExtension行不久后失败？window.devToolsExtension（）：f=>f）
。恐怕这两种方法在节点环境中都不起作用。如果有必要，您需要找到另一种方法来管理服务器上的用户会话。谢谢，它可以工作。也许你可以告诉我需要做什么才能在服务器的组件中获得日期