Invalid hook call [REACT BÁSICO]

[MateusVasconce]

Olá Pessoal, não encontrei nenhuma dúvida semelhante nos tópicos. Gostaria de saber se alguém poderia me ajudar.

Na aula 7 do módulo React Básico, o professor copia todo o código de App.js e cola em Home.js. A partir disso o meu navegador não apresenta mais a página com input Usuário e botão Pesquisar.

Já conferi todas as mudanças em relação a versões do react-router-dom e não identifiquei o erro. Ao inspecionar minha página vejo a seguinte mensagem:

react.development.js:207 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Porém não consigo identificar o erro.

Alguém sabe como resolver? Não estou conseguindo avançar nas aulas.

[AlbertoVictorRebello]

Oi @MateusVasconce, muinha Home está assim. Já terminei essa aula então pode estar mais avançada do que da aula 7 (não lembro se essa é a última):

// import logo from '../logo.svg';
import '../../App.css';
import React, { useState } from 'react';
import axios from 'axios';
import Repositories from '../../Repositories/Repositories';
import { useNavigate } from 'react-router-dom';
import Button from 'react-bootstrap/Button';

function Home(props) {
  const navigate = useNavigate();
  const [user, setUser] = useState('');
  function handleSearch() {
    axios.get(`https://api.github.com/users/${ user }/repos`).then(response => {
    const repositories = response.data;
    const repositoriesName = [];
    repositories.map((repository) =>
    {
      repositoriesName.push(repository.name)
    });
    localStorage.setItem('repositoriesName', JSON.stringify(repositoriesName));
    navigate('/repositories');

  });
  }
  return (
    <>      
    <input className='userInput' placeholder='user' value={ user } onChange={e => setUser(e.target.value)}/>
    <Button onClick={ handleSearch }>Search</Button>    
    </> 
  );
}

export default Home;

[HamiltonLopes]

manda teu código, aparentemente vc ta declarando um hook fora de uma function.

[MateusVasconce]

[HamiltonLopes]

Muda o nome da function da Home.js pra Home.

E na página de rotas coloca assim:

 <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/repositories" element={<Repositories />} />
      </Routes>
    </BrowserRouter>

[pedro-mascarenhas]

Fala @MateusVasconce, os arquivos referentes a componentes devem ter a extensão .jsx
Notei que nas imagens estão com a extensão .js mude e veja se resolve seu problema.

exemplo
Home.jsx
Repositories.jsx
etc...

[HamiltonLopes]

o meu ta com .js aqui e ta rodando normal

[igormjalves]

Bom dia, Matheus,

Já verifiquei algo que você precisa corrigir. No seu arquivo App.js você importa a função de rotas como import Routes from "./routes", porém no seu arquivo routes.js o nome da sua função é RoutesApp, portanto ou você altera o nome da função, ou a importação no arquivo App.js.

[pedro-mascarenhas]

Na configuração padrão o transpiler irá interpretar os dois tipos de arquivo da mesma forma, nesse caso você pode utilizar qualquer um deles.
(não sei se ele alterou de alguma forma a configuração padrão do projeto, sugeri que ele alterasse )

[HamiltonLopes]

tendi, não sabia dessa

[MateusVasconce]

Valeu pelas dicas pessoal. Corrigi algumas coisas no código mas ainda não consegui resolver o problema. Se tiverem mais alguma dica agradeço

[HamiltonLopes]

manda o link do github ai pra eu analisar seu projeto

[MateusVasconce]

GitHub - MateusVascon95/reactBasico: ModuloReactBasicoHC

[HamiltonLopes]

Descobri oq era, o react-router-dom não ta instalado ou foi instalado incorretamente, vai no eu projeto e usa um:

npm uninstall react-router-dom

e depois um:

npm i react-router-dom

Detalhe: tem q ser dentro da pasta ‘gamagit’

[pedro-mascarenhas]

Notei que ele tbm deve instalar o axios

[HamiltonLopes]

não testei o axios, só a página msm

[pedro-mascarenhas]

vou deixar os passos que utilizei para rodar o teu projeto aqui, vai servir para complementar o que o @HamiltonLopes falou.

Excluir os arquivos: package-lock.json e package.json

Excluir a pasta: node_modules

Entrar na pasta gamagit

Rodar npm install

Instalar o axios npm i axios

Instalar o React Router Dom npm i react-router-dom

Rodar o projeto npm run start

Recomendações:
remover props dos componentes (não estão sendo utilizadas)

[MateusVasconce]

Quando eu crescer quero ser igual a vocês! Essa comunidade é a melhor.

Obrigado galera aparentemente funcionou! Posso continuar meus estudos

Ainda estou engantinhando na programação, deem um desconto pro noob hahhaha.