Reactjs TypeError: Невозможно прочитать свойство 'toLowerCase' из неопределенного (act-router-config) - PullRequest
Новая
       49

Reactjs TypeError: Невозможно прочитать свойство 'toLowerCase' из неопределенного (act-router-config)

0 голосов
/ 05 июня 2019

Я использую Reactjs для рендеринга на стороне сервера, использую пакетact-router-config для достижения ssr, но после изменения React Router на код response-router-config.Приложение перестало работать

Ошибка отображается для меня после того, как я изменил код обычного React router на код response-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)

1 Ответ

0 голосов
/ 05 июня 2019

Согласно документации из react-router-config ключ должен быть component, а не components.

В вашем коде это в Routes.js file. Можете ли вы попробовать изменить его на component

...