Ошибка консоли, решение которой я не могу найти

Question

Я по-прежнему получаю ошибку ниже в консоли. Я попытался неявно вернуть эти компоненты, установив для них оба вида экспорта с именем И по умолчанию, а также импортировал их как таковые. Приветствуются любые предложения или вводимые данные.

Неперехваченное инвариантное нарушение: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: объект. Проверьте метод рендеринга 'Header'

Компонент AppRouter:

import React from 'react';
import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
import AboutPage from '../components/AboutPage';
import ContactPage from '../components/ContactPage';
import ErrorPage from '../components/ErrorPage';
import Header from '../components/Header';
import HomePage from '../components/HomePage';

const AppRouter = () => (
    <BrowserRouter> 
        <div>
            <Header />
            <Switch>
                <Route path='/' component={HomePage} exact={true}/>
                <Route path='/about' component={AboutPage}/>
                <Route path='/contact' component={ContactPage}/>
                <Route component={ErrorPage}/>
            </Switch>    
        </div>   
    </BrowserRouter>
);

export default AppRouter;

Компонент заголовка:

import React from 'react';
import { NavLink } from 'react-router-dom';

const Header = () => (
    <div>
        <h1>FRD</h1>
        <NavLink to='/' activeClassName='is-active' exact={true}>Home</NavLink>
        <NavLink to='/about' activeClassName='is-active'>About</NavLink>
        <NavLink to='/contact' activeClassName='is-active'>Contact</NavLink>
    </div>
);

export default Header;```

Answer 1

Прочтите сначала классы и то, как они работают, но также и компоненты. https://reactjs.org/docs/components-and-props.html#functional -and-class-components и https://medium.com/@leannezhang / curly-braces-versus-parenthesis-in- reactjs -4d3ffd33128f и тогда вы поймете, что происходит .

    const Header = () => {
return (
    <div>
        <h1>FRD</h1>
        <NavLink to='/' activeClassName='is-active' exact={true}>Home</NavLink>
        <NavLink to='/about' activeClassName='is-active'>About</NavLink>
        <NavLink to='/contact' activeClassName='is-active'>Contact</NavLink>
    </div>
);
}

Answer 2

Попробуйте изменить следующее:

const Header = () => (
    <div>
        <h1>FRD</h1>
        <NavLink to='/' activeClassName='is-active' exact={true}>Home</NavLink>
        <NavLink to='/about' activeClassName='is-active'>About</NavLink>
        <NavLink to='/contact' activeClassName='is-active'>Contact</NavLink>
    </div>
);

на

function Header() {
  return (  
      <div>
          <h1>FRD</h1>
          <NavLink to='/' activeClassName='is-active' exact={true}>Home</NavLink>
          <NavLink to='/about' activeClassName='is-active'>About</NavLink>
          <NavLink to='/contact' activeClassName='is-active'>Contact</NavLink>
      </div>);
}

или, в качестве альтернативы, попробуйте в AppRouter следующее.

<BrowserRouter> 
        <div>
            {Header}
            <Switch>
....

Answer 3

Измените компонент заголовка следующим образом

import React from 'react';
import { NavLink } from 'react-router-dom';

const Header = () => {
return (
    <div>
        <h1>FRD</h1>
        <NavLink to='/' activeClassName='is-active' exact={true}>Home</NavLink>
        <NavLink to='/about' activeClassName='is-active'>About</NavLink>
        <NavLink to='/contact' activeClassName='is-active'>Contact</NavLink>
    </div>
);
}
export default Header;