Неудачный тип реквизита: `component` типа` object` передан в `Route`, ожидаемая` function` - PullRequest
Новая
       6

Неудачный тип реквизита: `component` типа` object` передан в `Route`, ожидаемая` function`

0 голосов
/ 14 февраля 2019

Я просмотрел все ответы для этого конкретного случая, однако все они либо предполагают, что один не выходит за пределы 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>
  );
}

О.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 />.

Есть идеи?

Ответы [ 2 ]

0 голосов
/ 15 февраля 2019

При использовании импорта с псевдонимами он может попытаться импортировать 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>
0 голосов
/ 14 февраля 2019 
import React from 'react';
// style
import classes from './About.scss';

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

export default About;
...