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.