失败的道具类型：提供给`Route`的`object`类型的`component`，预期的`function`

Question

我已经查找了此特定案例的所有答案，但是所有答案都表明不是从 React.Component 扩展的，或者在其他情况下表明使用命名导出而不是默认导出并导入带有花括号的类而不是没有可能是问题所在。

错误：

失败的道具类型：提供给Route的object类型的无效道具component，应为function。

我已经更新了所有依赖项，检查了所有这些情况，但仍然无法弄清楚抛出错误的原因。

下面是我的代码：

App.jsx

import React from 'react';
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
// components
import NotFound from '../common/NotFound';
import Home from './home/Home';
import About from './about/About';

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route
          render={() => (
            <Switch>
              <Route exact path={'/'} component={Home} />
              <Route exact path={'/about'} component={About} />
              <Route render={() => <Redirect to={'/'} />} />
              <Route component={NotFound} />
            </Switch>
          )}
        />
      </Switch>
    </BrowserRouter>
  );
}

关于.jsx

import React from 'react';
// style
import classes from './About.scss';

export default function About() {
  return <div className={classes.aboutContainer}>Hello</div>;
}

Home.jsx

import React, { useState, useEffect, useRef } from 'react';
// components
import NavigationFull from '../navigation/NavigationFull';
import NavigationToggle from '../navigation/NavigationToggle';
import About from '../about/About';
// styles
import classes from './Home.scss';
import fullNavClass from '../navigation/NavigationFull.scss';

export default function Home() {
  const navigation = useRef(null);
  const [topOffset, setTopOffset] = useState(window.innerHeight);

  useEffect(() => {
    window.addEventListener('scroll', handleStickyHeader);
    return () => {
      window.removeEventListener('scroll', handleStickyHeader);
    };
  }, []);

  function handleStickyHeader() {
    const { offsetTop, clientHeight, classList } = navigation.current;

    setTopOffset(offsetTop);
    // 15px added to substitute for the lack of margin.
    const offset = window.pageYOffset + clientHeight + 15;

    if (offset > topOffset) {
      classList.add(fullNavClass.fixed);
    } else {
      classList.remove(fullNavClass.fixed);
    }
  }

  return (
    <>
      <NavigationToggle />
      <NavigationFull reference={navigation} color={'white'} />
      <div className={classes.introContainer}>
        <span className={classes.job}>SOFTWARE ENGINEER & UX DESIGNER</span>
        <div className={classes.about}>
          <span className={classes.welcome}>Hey, I'm</span>
          <span className={classes.name}>Filip Grebowski</span>
        </div>
      </div>
      <About />
    </>
  );
}

在<About />组件启动的地方抛出错误。

有什么想法吗？

Answer 1

使用别名导入时，可以尝试导入example.scss，而不是example.js。相反，当支持文件位于同一目录路径中时，您可以使用声明性扩展：

import NotFound from '../common/NotFound.js';
import Home from './home/Home.js';
import About from './about/About.js';

或者，另一种方法是将您的支持文件分开到他们自己的文件夹中：

└── components
    ├── About
    |   ├── __tests__
    |   |   └── about.test.js
    |   ├── styles
    |   |   └── about.scss
    |   └── about.js
    |
    ├── Home
    |   ├── __tests__
    |   |   └── home.test.js
    |   ├── styles
    |   |   └── home.scss
    |   └── home.js
    |
    ├── NotFound
    |   ├── __tests__
    |   |   └── notfound.test.js
    |   ├── styles
    |   |   └── notfound.scss
    |   └── notfound.js
    |
    ...etc

此外，您可以像这样简化 About 函数导出：

import React from 'react';
import { aboutContainer } from './About.scss';

export default () => <div className={aboutContainer}>Hello</div>

Answer 2

import React from 'react';
// style
import classes from './About.scss';

const About = () => {
  return <div className={classes.aboutContainer}>Hello</div>;
}

export default About;