Question

我正在使用Reactjs进行服务器端渲染，使用react-router-config包来实现ssr，但是将React Router更改为react-router-config代码之后。应用程序停止工作

我将代码正常的React Router更改为react-router-config代码后，向我显示错误

在StaticRouter中

<StaticRouter location={req.path} context={{}}>
  <div>{renderRoutes(Routes)}</div>
</StaticRouter>

我的package.json文件

{
  "name": "react-ssr",
  "version": "1.0.0",
  "description": "Server side rendering project",
  "main": "index.js",
  "scripts": {
    "dev": "npm-run-all --parallel dev:*",
    "dev:server": "nodemon --watch build --exec \"node build/bundle.js\"",
    "dev:build-server": "webpack --config webpack.server.js --watch",
    "dev:build-client": "webpack --config webpack.client.js --watch"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "0.16.2",
    "babel-cli": "6.26.0",
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-es2017": "6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "6.24.1",
    "compression": "1.7.0",
    "concurrently": "3.5.0",
    "express": "4.15.4",
    "express-http-proxy": "1.0.6",
    "lodash": "4.17.4",
    "nodemon": "1.12.0",
    "npm-run-all": "4.1.1",
    "react": "16.0.0",
    "react-dom": "16.0.0",
    "react-helmet": "5.2.0",
    "react-redux": "5.0.6",
    "react-router-config": "1.0.0-beta.4",
    "react-router-dom": "4.2.2",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0",
    "serialize-javascript": "1.4.0",
    "webpack": "3.5.6",
    "webpack-dev-server": "2.8.2",
    "webpack-merge": "4.1.0",
    "webpack-node-externals": "1.6.0"
  }
}

Routes.js文件

    import React from 'react';
    import Home from './components/Home';
    import UsersList from './components/UsersList';

    export default [
        {
            path: '/',
            components: Home,
            exact: true
        },
        {
            path: '/users',
            components: UsersList
        }
    ];

clinet.js文件

    // Startup point the client side application
    import 'babel-polyfill';
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { BrowserRouter } from 'react-router-dom';
    import { createStore, applyMiddleware } from 'redux';
    import thunk from 'redux-thunk';
    import { Provider } from 'react-redux';
    import { renderRoutes } from 'react-router-config';
    import Routes from './Routes';
    import reducers from './reducers';

    const store = createStore(reducers, {}, applyMiddleware(thunk))

    ReactDOM.hydrate(
        <Provider store={store}>
            <BrowserRouter>
            <div>{renderRoutes(Routes)}</div>
            </BrowserRouter>
        </Provider>,
         document.querySelector('#root'));

renderer.js

    import React from 'react';
    import { renderToString } from 'react-dom/server';
    import { StaticRouter } from 'react-router-dom';
    import { Provider } from 'react-redux';
    import { renderRoutes } from 'react-router-config';
    import Routes from '../client/Routes';

    export default (req, store) => {
        const content = renderToString(
            <Provider store={store}>
                <StaticRouter location={req.path} context={{}}>
                   <div>{renderRoutes(Routes)}</div>
                </StaticRouter>    
            </Provider>
        );

        return `
        <html>
            <head></head>
            <body>
                <div id="root">${content}</div>
                <script src="bundle.js"></script>
            </body>
        </html>
        `;
    };

index.js文件

    import 'babel-polyfill';
    import express from 'express';
    import renderer from './helpers/renderer';
    import createStore from './helpers/createStore';
    const app = express();

    app.use(express.static('public'));
    app.get('*', (req,res) => {
        const store = createStore();
        //some logic to initialize
        // and load data into the store
        res.send(renderer(req, store));  
    });

    app.listen(3000, () =>{
        console.log('Listening on port 3000');
    });

错误输出

    TypeError: Cannot read property 'toLowerCase' of undefined
        at ReactDOMServerRenderer.renderDOM (/var/www/html/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:2776:28)
        at ReactDOMServerRenderer.render (/var/www/html/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:2755:23)
        at ReactDOMServerRenderer.read (/var/www/html/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:2722:19)
        at renderToString (/var/www/html/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:2980:25)
        at exports.default (/var/www/html/server/build/bundle.js:218:46)
        at /var/www/html/server/build/bundle.js:169:37
        at Layer.handle [as handle_request] (/var/www/html/server/node_modules/express/lib/router/layer.js:95:5)
        at next (/var/www/html/server/node_modules/express/lib/router/route.js:137:13)
        at Route.dispatch (/var/www/html/server/node_modules/express/lib/router/route.js:112:3)
        at Layer.handle [as handle_request] (/var/www/html/server/node_modules/express/lib/router/layer.js:95:5)

Answer 1

根据INSERT INTO environment_fid (FID_environment) VALUES (environment_id)中的documentation，密钥必须是react-router-config而不是component。

在您的代码中，它位于components中。您可以将其更改为Routes.js file

吗？

Reactjs TypeError：无法读取未定义的属性“ toLowerCase”（react-router-config）

1 个答案: