[DÚVIDA] [GraphQL/React] Aula 9 - Aplicação react exibe páginas em branco

No final da aula o professor roda a aplicação e o conteúdo aparece normal pra ele. Mas para mim não… Minha aplicação aparece em branco, mas o conteúdo está presente no código. Não sei o que eu fiz de errado. Não aparece nenhuma mensagem de erro, inclusive aparece escrito “webpack compiled successfully”. Abaixo meus códigos.

Home
import React from 'react';

export default function Home() {
  return <h1>Oiê!</h1>;
}
SignIn
import React from "react";

export default function SignIn() {
  return (
    <form action="/authenticate" method="POST">
      <fieldset>
        <label for="email">E-mail</label>
        <input
          id="email"
          name="email"
          type="email"
          inputmode="email"
          autocomplete="username"
        />
      </fieldset>
      <fieldset>
        <label for="password">Senha</label>
        <input
          id="password"
          name="password"
          type="password"
          autocomplete="current-password"
        />
      </fieldset>
      <button type="submit">Entrar</button>
    </form>
  )
}
App
import Router from "./router";

function App() {
  return <Router />;
}

export default App;
index
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);
router
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import SignIn from './pages/SignIn';

export default function Router() {
  return (
    <Routes>
      <Route path={['', '/']} component={Home} />
      <Route path="/sign-in" component={SignIn} />
    </Routes>
  )
}
2 Likes

O problema está no arquivo Router.js… mude o seu código para esse aqui abaixo que deve funcionar

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import SignIn from './pages/SignIn';

export default function Router() {
    return (
        <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/sign-in' element={<SignIn />} />
        </Routes>
    );
}
1 Like

Não funcionou… Continua em branco.

@cristiane.dsc, tenta mudar o nome do router.js para Router.js e muda o import no APP.js para: import Router from ‘./Router’;

1 Like

Fiz o que você disse e continua em branco :frowning:
Quando inspecione e verifico a aba “Repostas”, aparece a mensagem " You need to enable JavaScript to run this app. "

Explorando mais a ferramenta de inspeção, parece que tem 4 erros. Mas não entendi nada.


Em Router.js tenta isso
image

1 Like

@maerico Deu certo! Ai, finalmente!!!

As linhas que você indicou eu já tinha alterado, mas faltava o BrowserRouter e aparentemente era esse o problema.

Muito obrigada :heart:

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.