Why does match give an error?

U

UncleDenn2018-06-26 15:01:33

JavaScript

UncleDenn, 2018-06-26 15:01:33

Hello everyone
Please help me with this error.

TypeError: (0 , _reactRouter.match) is not a function
    at C:/react/izomorf-app/src/server.js:14:2
    at Layer.handle [as handle_request] (C:\react\izomorf-app\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\react\izomorf-app\node_modules\express\lib\router\index.js:317:13)
    at C:\react\izomorf-app\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\react\izomorf-app\node_modules\express\lib\router\index.js:335:12)
    at next (C:\react\izomorf-app\node_modules\express\lib\router\index.js:275:10)
    at expressInit (C:\react\izomorf-app\node_modules\express\lib\middleware\init.js:40:5)
    at Layer.handle [as handle_request] (C:\react\izomorf-app\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\react\izomorf-app\node_modules\express\lib\router\index.js:317:13)
    at C:\react\izomorf-app\node_modules\express\lib\router\index.js:284:7

import express  from 'express';
import React    from 'react';

import ReactDOM from 'react-dom';
import { match, RouterContext } from 'react-router';
import routes from './routes';

import {renderToString, renderToStaticMarkup} from 'react-dom/server';

const app = express();
const ReactDOMServer = require('react-dom/server');

app.use((req, res) => {
 match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {  
  if (redirectLocation) { // Если необходимо сделать redirect
    return res.redirect(301, redirectLocation.pathname + redirectLocation.search);
  }
  
  if (error) { // Произошла ошибка любого рода
   return res.status(500).send(error.message);
  }
  
  if (!renderProps) { // Мы не определили путь, который бы подошел для URL
    return res.status(404).send('Not found');
  }
  
  const componentHTML = ReactDom.renderToString(<RouterContext {...renderProps} />);
  
  return res.end(renderHTML(componentHTML));
 });
  });
   
const assetUrl  = process.env.NODE_ENV !== "production" ? 'http://localhost:8050' : '/';

function renderHTML(componentHTML) {
  return `
    <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Hello React</title>
          <link rel="stylesheet" href="${assetUrl}/public/styles.css">
      </head>
      <body>
        <div id="react-view">${componentHTML}</div>
        <script type="application/javascript" src="${assetUrl}/public/bundle.js"></script>
      </body>
    </html>
  `;
}

const PORT = process.env.PORT || 3001;

app.listen(PORT, () => {
  console.log("server listening on: " + PORT);
})

{
  "name": "izomorf-app",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "set NODE_ENV='production' && webpack -p",
    "webpack-devserver": "webpack-dev-server --debug --hot --devtool eval-source-map --output-pathinfo --watch --colors --inline --content-base public --port 8050 --host 0.0.0.0",
    "nodemon": "set NODE_PATH=./src; && nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "bluebird": "^3.5.1",
    "express": "^4.16.3",
    "prop-types": "^15.6.2",
    "react": "^16.4.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.4.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-react": "^7.9.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "html-loader": "^0.5.5",
    "json-loader": "^0.5.7",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "nodemon": "^1.17.5",
    "postcss-loader": "^2.1.5",
    "react-hot-loader": "^1.3.0",
    "react-router": "^4.3.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.8.3",
    "webpack-cli": "^3.0.4",
    "webpack-dev-server": "^3.1.4"
  }
}