Reactjs路由器:无法读取未定义(react-TypeError-toLowerCase)的属性“”react-router“”
Reactjs路由器:无法读取未定义(react-TypeError-toLowerCase)的属性“”react-router“”
提问于 2019-06-05 18:18:14
我使用Reactjs进行服务器端渲染，使用react- Router -config包实现ssr，但在将React router更改为react-router-config代码之后。应用程序已停止工作
在我将代码normal React路由器更改为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)回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-05 23:31:21
根据react-router-config的documentation，key必须是component而不是components。
在您的代码中，它是Routes.js file格式的。您可以尝试将其更改为component吗
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56458565
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号