Question

我收到此错误。我已经在index.js中定义了所有组件，我正在使用react-router v4。错误：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。请检查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

您使用的是反应路由器的alpha / beta版本，然后升级到稳定的v4版本吗？

与反应路由器的alpha和beta版本相比，在稳定的v4版本中，他们将Match重命名为Route，并将包拆分为核心和dom子包（如反应一样）

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

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

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

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

1 个答案: