Question

我已经找到了针对此特定情况的所有答案，但是所有这些都表明一个不是从React.Component扩展而来的，或者在其他情况下，它们都暗示了使用导出命名而不是默认导出并使用花括号导入类而不是没有问题。

错误：

道具类型失败：提供给component的类型object的道具Route无效，预期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>
  );
}

About.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

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

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

export default About;

Answer 2

使用别名导入时，它可以尝试导入<input type="date" name="custom_date">而不是example.scss。相反，当支持文件位于同一目录路径中时，可以使用声明性扩展名：

example.js

或者，一种替代方法是将您的支持文件分成各自的文件夹：

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

About

失败的道具类型：提供给“路线”的“对象”类型的“组件”，预期的“功能”

2 个答案: