0

Tengo el siguiente codigo y al ejecutarlo el componente switch no renderiza correctamente, solo funciona cuando esta comentado, no se cual es el problema ya que no me manda mensaje de error en la consola al ejecutar el npm start

Los unicos warnings que tengo son de eslint, pero solo eso, la pagina se muestra en local host pero no aparace el componente, solo cuando esta comentado el codigo de switch.

   import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    import {BrowserRouter}  from 'react-router-dom';
    
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
       <BrowserRouter>
        <App/>
      </BrowserRouter>
    
    );

y el archivo App.js:

import React from 'react'
import { BrowserRouter as Switch, Router, Route, Link } from "react-router-dom"
import "bootstrap/dist/css/bootstrap.min.css"
import AddReview from "./components/add-review"
import MoviesList from "./components/movies-list"
import Movie from "./components/movie"
import Login from "./components/login"
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';

function App() {
  const [user, setUser] = React.useState(null);
  
  async function login(user = null){
    setUser(user)
  }

  async function logout(){
    setUser(null)
  }

  return (
    <div>
    <Navbar bg="light" expand="lg">
        <Navbar.Brand>Movies Reviews</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        
          <Nav className="me-auto">
            <Nav.Link>
              <Link to={"/movies"}>Movies</Link>
              </Nav.Link>
            <Nav.Link>
            { user ? (
              <a onClick={logout}>Logout User</a>
            ):(
              <Link to ={"/login"}>Login</Link> 
            )}
            </Nav.Link>
          </Nav>
        </Navbar>
        
     <Switch>
        <Route exact path={["/","/movies"]} component={MoviesList}>
        </Route>
        <Route path="/movies/:id/review" render={(props)=>
         <AddReview {...props} user={user}/>
        }>
        </Route>
        <Route path="/movies/:id/" render={(props)=>
        <Movie {...props} user={user}/>
        }>
        </Route>
        <Route path="/login" render={(props)=>
        <Login {...props} login={login}/>
        }>
        </Route>
       </Switch> 
         
         </div>
  );
}

export default App;

Alguien ha pasado por este tipo de problemas? Talves tenga que ver con el BrowserRouter, pero si lo elimino de la lista de import React no me reconoce Switch.

1
  • En vez de <Switch> prueba con <Routes> Commented el 3 sept. 2022 a las 3:04

1 respuesta 1

0

Imagino que estás usando la versión 5 de React Router. En ambos componentes estás usando BrowserRouter, sin embargo esto solo deberías usarlo en tu componente Index (el primero), en el segundo (App) donde manejas las diferentes rutas estás asignando un alias a BrowserRouter BrowserRouter as Switch, sin embargo deberías exportar Switch de React Router, sino solo estás implementando el mismo componente dos veces y seguro React se está quejando de eso.

En resumen, tus imports deberían de quedar así:

Index.tsx import {BrowserRouter} from 'react-router-dom';

App.tsx import { Switch } from "react-router";

También por favor nota que Switch debería ser exportado de "react-router", mientras que BrowserRouter de 'react-router-dom', puedes ver más detalles en la documentación

Espero que te sea de ayuda. E

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.