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

[cristiane.dsc]

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

[fernando.vargas]

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

[cristiane.dsc]

Não funcionou… Continua em branco.

[suelendp]

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

[cristiane.dsc]

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

[cristiane.dsc]

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

[maerico]

Em Router.js tenta isso

[cristiane.dsc]

@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