Question

所以我试图将我的React 2应用转换为React 4.我要做的第一件事就是开发新的React路由器，但我遇到了很多问题。我发布的那个是让Link组件发挥作用。在我的Layout.js中添加链接组件时，我收到以下错误（见下文）。如果我删除链接组件，则错误消失。关于为什么会发生这种情况的任何想法？

app.js

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';

import Layout from "./components/Layout";
import About from "./components/About";
import NotFound from "./components/Layout";

const App = () => {
  return (
    <BrowserRouter>
      <div>
        <Route exact path="/" component={Layout} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </div>
    </BrowserRouter>
  )
}
const app = document.getElementById('app');

render(<Layout />, app);

Layout.js

import React from "react";
import { Link } from 'react-router-dom';

export default class Layout extends React.Component {
  render() {
    return (
      <div>
        <div>
          <h1>
            Layout
          </h1>
            <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </div>
      </div>
    );
  }
}

About.js

import React from "react";

export default class About extends React.Component {
  render() {
    return (
        <h2> 
            About
        </h2>
    );
  }
}

的package.json

{
  "name": "react-tutorials",
  "version": "0.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-loader": "^6.2.0",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "history": "3.0.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {
    "react-hot-loader": "^1.3.1",
    "webpack-dev-server": "^1.16.5"
  },
  "scripts": {
    "start": "webpack-dev-server --content-base src --inline --hot", 
    "dev": "webpack-dev-server --content-base src --inline --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

错误

Uncaught TypeError: Cannot read property 'history' of undefined
    at Link.render (Link.js:76)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:587)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:607)
    at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (ReactPerf.js:66)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:220)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
    at Object.mountComponent (ReactReconciler.js:37)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:241)
    at ReactDOMComponent._createContentMarkup (ReactDOMComponent.js:591)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:479)

Answer 1

您正在从react-router导入BrowserRouter和Link，但它们需要从react-router-dom导入。你应该真正检查他们文档上的basic example，因为它不一定是从react-router 2到4的直接合并。由于你依赖于Match和Miss，你将遇到其他问题。 / p>

您需要对app.js进行以下更改：

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';

import Layout from "./components/Layout";
import About from "./components/About";
import NotFound from "./components/Layout";

const App = () => {
  return (
    <BrowserRouter>
      <div>
        <Route exact path="/" component={Layout} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </div>
    </BrowserRouter>
  )
}
const app = document.getElementById('app');

render(<App />, app);

...以及对Layout.js的以下更改：

import React from "react";
import { Link } from 'react-router-dom';

export default class Layout extends React.Component {
  render() {
    return (
      <div>
        <div>
          <h1>
            Layout
          </h1>
            <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </div>
      </div>
    );
  }
}

如果你使用像ESLint这样的linter，你的错误本可以被抓住。我强烈建议你研究一下。

Answer 2

我相信版本4你必须从react-router-dom

导入链接

import { Link } from 'react-router-dom'

其他文档： https://reacttraining.com/react-router/web/api/Link

React - 元素类型无效：期望一个字符串

2 个答案: