2
respostas

Primeira rota com react router... já tentei de tudo e nada faz funcionar.

Bom dia! Ao fazer a alteração da aula, recebo o erro abaixo e nada corrige. Podem me ajudar, por favor?

Segue o código...

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createGlobalStyle } from 'styled-components';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: sans-serif, Roboto, Ubuntu, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 
  }

  li {
    list-style: none;
  }
`
const root = ReactDOM.createRoot( document.getElementById('root'));
root.render(
  <React.StrictMode>
    <GlobalStyle/>
    <BrowserRouter>
      <Routes>
        <Route path='/favoritos' element={<p>Oi, você conseguiu</p>}/>
        <Route path='/' element={<App/>}/>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

Segue o erro...

Failed to compile.

Error in ./~/react-router-dom/dist/umd/react-router-dom.development.js
Module parse failed: /home/denise/Documentos/web-artigos-android/node_modules/react-router-dom/dist/umd/react-router-dom.development.js Unexpected token (488:77)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (488:77)
 @ ./~/react-router-dom/dist/main.js 18:19-67
2 respostas

Olá, Denise! Tudo bem? Espero que sim!

O erro que você está recebendo indica que há um token inesperado no arquivo react-router-dom.development.js, que pode ser causado por um problema de sintaxe ou por um erro de configuração.

Para resolver esse problema, sugiro que você verifique se todas as dependências do React Router estão instaladas corretamente. Certifique-se de que você tenha instalado o pacote react-router-dom e suas dependências usando o comando npm install react-router-dom.

Além disso, verifique se você está importando corretamente o BrowserRouter, Routes e Route do pacote react-router-dom. Certifique-se de que os nomes dos componentes estejam corretos e que você esteja importando-os da maneira correta.

Outra possível causa desse erro é a falta de um loader adequado para lidar com o tipo de arquivo do react-router-dom.development.js. Certifique-se de que você tenha configurado corretamente os loaders no seu arquivo de configuração do webpack ou do Babel, dependendo de como você está configurando seu projeto.

Se você puder fornecer mais informações sobre a configuração do seu projeto e sobre como você está importando o React Router, posso tentar ajudá-la de forma mais específica. Espero que essas sugestões possam ajudar a resolver o problema!

Espero ter ajudado!

Caso tenha dúvidas, fico à disposição.

Abraços e bons estudos!

Olá Sarah, agradeço o apoio. Consegui resolver da seguinte forma: precisei alterar a versão que estava instalada, para uma versão um pouco mais aintiga: npm install react-router-dom@6.0.1

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software