Duvida React

Estou tentando acompanhar o exemplo do react e está dando um erro de compilação que não consigo descobrir. Agradeço qualquer ajuda.
Segue o erro:
Failed to compile

./src/routes.jsAttempted import error: 'Switch' is not exported from 'react-router-dom'.

This error occurred during the build time and cannot be dismissed.

Segue o arquivo routes.js
import React from ‘react’;
import {Switch, Route, BrowserRouter} from ‘react-router-dom’;
import Repositories from ‘./Repositories’;
import Home from ‘./Home’;

export default function Routes() {
return (

            <Route path='/' exact component={Home} />
            <Route path='/repositories' component={Repositories} />

        </Switch>
    </BrowserRouter>
    )
10 Likes

É por conta da versão do react-router-dom. Não utiliza mais o “Switch”.

3 Likes

Não sei porque não aparece no código que copiei mas, dentro do return, constam as aberturas de BrowserRoutes e Switch

1 Like

Valeu Paulo. Fui na página do react-router-dom, onde baixei o programa, e no expemplo de uso, eles utilizam o switch. Veja o import e o uso do switch no exemplo da própria página:

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

``` {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}

        <Switch>
          <Route path="/about">
            <About />
          </Route>
3 Likes
import React from 'react';
import { Routes, Route, BrowserRouter } from 'react-router-dom';
import Home from './Home';
import Repositories from './Repositories';

export default function RoutesApp() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' exact element={<Home />} />
        <Route path='/repositories' element={<Repositories />} />
      </Routes>
    </BrowserRouter>
  );
}

Houveram algumas mudanças no uso do Switch, foi alterado pelo Routes. O meu ficou dessa forma aqui :point_up_2:, espero que ajude.

15 Likes

Exatamente.

1 Like

Obrigado Paulo e Willy. Vou fazer a correção. Abs.

3 Likes

Por nada, compartilhar conhecimento sempre é muito bom :nerd_face: :rocket:

3 Likes

Agora funcionou. Obrigado

2 Likes

quando meti import { Routes , Route, …} gerava um erro tive que deixar o switch
e nas tags em baixo é que mudei para Routes e na component dava nao precisei de mudar pra element, agora fiquei um pouco na duvida porque nao sei o que fazer.

Outra coisa, como voce assistiu aop primeiro aula do raecgt intermedio? criaram alguns ficheiros e n sei bem como fazer?

2 Likes

Muito obrigada! Estava com o mesmo problema e resolveu.
Mas acho importante lembrar que além disso temos que mudar algumas outras coisas, no trecho abaixo o nome da função era Routes e foi trocado para RoutesApp.

Então terá que mudar no App.js também onde era chamada a função Routes, para RoutesAPP.

import React from "react";
import RoutesApp from "./routes";

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

export default App;
6 Likes

Isso, bem lembrado. Como o Routes já estava sendo usado pelo react-router-dom a função que eu criei teve que sofrer alterações mudando o nome para RoutesApp(). Como consequência o import dele no App() mudou conforme você mencionou aqui.

3 Likes

Você tentou deixar o conteúdo do seu arquivo da mesma forma como compartilhei?

1 Like

Acabei de iniciar a aula dois do react intermediário. A primeira aula está repetida com a aula final da parte de react básico. Acredito que trocaram a aula e como está errada não deu pra ver as mudanças que ele fez.

1 Like

Manda aqui o print da tela do teu erro e do teu codigo pra gente tentar ajudar.

1 Like

Olá bom dia ,vc já chegou na aula 3 ,ele usa um estilo css que não explica ,se você souber e poder compartilhar

2 Likes

@cardoy se puder editar o título do tópico para ficar mais claro do que se trata, acho que vai facilitar para o pessoal encontrá-lo na pesquisa sobre a dúvida :slight_smile:

2 Likes

Boa tarde, vc colocou o seu no repositório do github? se sim pode passar seu github.

1 Like

Eu não sei muito bem ao certo como ele fez. Eu resolvi meu problema indo até o github do professor e pegando as partes de css que estavam faltando e que não deu pra ver nas aulas. Se quiser posso te mandar o github do meu projeto para você ver como ficou.

@maerico e @Danilosilva o link para o meu projeto no github GitHub - willyoliv/gamagit, não está 100% idêntico ao projeto do professor mas está funcional. Espero que ajude. :+1: :rocket:

1 Like