期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：未定义

Question

我收到此错误。我已经在 index.js 中定义了所有组件，并且我正在使用 react-router v4。 错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件。检查App 的渲染方法。

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Match, Link} from 'react-router'

 const Home = () => {
    return (
        <div>
            <h1>Welcome HOME!</h1>
        </div>
    );
};
 const About = () => {
    return (
        <div>
            <h1>This is About .....</h1>
        </div>
    );
};
 const Topics = ({pathname}) => {
    return (
        <div>
            <h2>Topics </h2>
            {pathname}
        </div>
    );
};
  const App = () => {
  return (
    <div>
    <Router>
      <div>
        <ul>
          <li><Link to='/'>Home</Link></li>
          <li><Link to='/about'>About</Link></li>
          <li><Link to='/topics'>Topics</Link></li>
        </ul>
        <hr/>
        <Match  pattern='/' component={Home} />
        <Match  pattern='/about' component={About} />
        <Match  pattern='/topics' component={Topics} />
      </div>
    </Router>
    </div>
  );}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Answer 1

您是否使用了 react-router 的 alpha/beta 版本，然后升级到了稳定的 v4 版本？

与 react-router 的 alpha 和 beta 版本相比，在稳定的 v4 版本中，他们将 Match 重命名为 Route 并将包拆分为核心和 dom 子包（就像 react 一样）

尝试更改您的导入以反映其稳定的文档示例：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

你得到的错误是因为你的一个导入丢失了，你实际上得到了一个未定义的值而不是一个组件类。