Javascript React-元素类型无效：应为字符串

所以我尝试将我的React 2应用程序转换为React 4。我要做的第一件事就是开发新的React路由器，但我遇到了一些问题。我要发布的是让链接组件正常工作。当在my 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);

错误

---

您正在从react router导入BrowserRouter和链接，但它们需要从react router dom导入。你真的应该在他们的文档上查看，因为从react router 2到4不一定是一个简单的合并。你会遇到其他问题，因为你依赖比赛和失误

您需要对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);

从“React”导入React；
从'react dom'导入{render}；
从“react router dom”导入{BrowserRouter，Route}；
从“/components/Layout”导入布局；
从“/components/About”导入关于；
从“/components/Layout”导入未找到的内容；
常量应用=（）=>{
返回(
)
}
const app=document.getElementById（'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>
    );
  }
}

从“React”导入React；
从'react router dom'导入{Link}；
导出默认类布局扩展React.Component{
render（）{
返回(
布局

家
关于

);
}
}

---

如果您使用像ESLint这样的过梁，您的错误可能会被发现。我强烈建议您对此进行研究。

您正在从react router导入BrowserRouter和链接，但它们需要从react router dom导入。你真的应该在他们的文档上查看，因为从react router 2到4不一定是一个简单的合并。你会遇到其他问题，因为你依赖比赛和失误

您需要对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);

从“React”导入React；
从'react dom'导入{render}；
从“react router dom”导入{BrowserRouter，Route}；
从“/components/Layout”导入布局；
从“/components/About”导入关于；
从“/components/Layout”导入未找到的内容；
常量应用=（）=>{
返回(
)
}
const app=document.getElementById（'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>
    );
  }
}

从“React”导入React；
从'react router dom'导入{Link}；
导出默认类布局扩展React.Component{
render（）{
返回(
布局

家
关于

);
}
}

---

如果您使用像ESLint这样的过梁，您的错误可能会被发现。我强烈建议您对此进行研究。

我相信在版本4中，您必须从dom导入链接

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

其他文件：

---

我相信在版本4中，您必须从路由器dom导入链接

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

其他文件：

---

仅供参考，根据react路由器，他们使用react路由器@约翰，很抱歉，这是不正确的。教程必须有旧的语法，这是直接从react router文档本身提取的，它说从react router dom导入，我想他们不再使用历史了？为什么会出现新的错误？仅供参考，根据react路由器，他们使用react路由器@约翰，很抱歉，这是不正确的。教程必须有旧的语法，这是直接从react router文档本身提取的，它说从react router dom导入，我想他们不再使用历史了？为什么会出现新的错误？@John是否可能您的组件没有在路由器中呈现？你在用什么路由？你看到的都是我得到的你也从错误的地点导入了BrowserRouter。看一看，它们也需要从react路由器导入-dom@John看看最新的答案。祝你好运是的，现在我得到了一个新的错误列表，man angular routing好得多。谢谢，伙计，至少现在页面显示出来了。@John您的组件可能没有在路由器中呈现吗？你在用什么路由？你看到的都是我得到的你也从错误的地点导入了BrowserRouter。看一看，它们也需要从react路由器导入-dom@John看看最新的答案。祝你好运是的，现在我得到了一个新的错误列表，man angular routing好得多。谢谢，伙计，至少现在页面显示出来了。

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