1
votes

Erreur de console à laquelle je ne trouve pas la solution

Je continue à recevoir l'erreur ci-dessous dans la console. J'ai essayé de renvoyer implicitement ces composants, en les définissant à la fois comme des exportations nommées ET par défaut et en les important également. Toute suggestion ou contribution serait grandement appréciée.

Violation invariante non interceptée: le type d'élément n'est pas valide: attendait une chaîne (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais obtenu: objet. Vérifiez la méthode de rendu de 'Header'

Composant 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;```

Composant d'en-tête:

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;

reactjs react-router

2 commentaires

Cela résout votre problème stackoverflow.com/questions/34130539/...

J'ai aussi essayé ça avant de poster! Peu importe l'importation que j'utilise, par défaut ou nommée.

3 Réponses :

0
votes

Modifiez votre composant d'en-tête comme ceci

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;

1 commentaires

J'ai essayé cela juste avant de publier ceci - toujours la même erreur! Edit: réessayé juste pour confirmer.

0
votes

Ayez une bonne lecture des classes et de leur fonctionnement, mais aussi des composants en premier. https://reactjs.org/docs/components- and-props.html # composants-fonctionnels et de classe et https://medium.com/@leannezhang/curly- accolades contre parenthèses dans reactjs-4d3ffd33128f et alors vous comprendrez ce qui se passe.

    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>
);
}

0 commentaires

0
votes

Essayez de changer ce qui suit:

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

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>);
}

ou, dans AppRouter, essayez ce qui suit.

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>
);

2 commentaires

Ni l'un ni l'autre ne semblent faire l'affaire. Mes cheveux commencent à être arrachés.

Si vous le renommez d'en-tête en quelque chose qui n'est pas utilisé. (Comme il s'agit de l'exportation par défaut, vous ne pouvez renommer que le nom lors de l'importation, mais j'essaierais de le renommer complètement)