Sé que esta pregunta se ha hecho mucho y he visto muchas respuestas y artículos, incluido uno sobre cómo actualizar de React Router V5 a V6, ya que estoy acostumbrado a V5. Sin embargo, V6 me está dando un problema extraño que no sé cómo solucionar o qué estoy haciendo mal.
Aquí está mi código a continuación
Aplicación.js
import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import Login from './components/dashboard/Login'; import Profile from './components/dashboard/Profile'; import './resources/style/tutorApp.css'; export default class App extends Component { static displayName = App.name; render () { return ( <Router> <Routes> <Route path="/" element={ <Profile /> } /> <Route path="/Login" element={ <Login /> } /> </Routes> </Router> ); } }Perfil.js
import React, { Component } from 'react'; class Profile extends Component { render() { return ( <div> <h1>This is my Profile Page.</h1> </div> ); } } export default Profile;Iniciar sesión.js
import React, { Component } from 'react'; class Login extends Component { render() { return ( <div> <h1>This is my Login page.</h1> </div> ); } } export default Login;índice.js
import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href'); const rootElement = document.getElementById('root'); ReactDOM.render( <BrowserRouter basename={baseUrl}> <App /> </BrowserRouter>, rootElement); registerServiceWorker();Acabo de obtener una ventana en blanco en el navegador. ¡No se renderiza nada! ¿Cuál es el problema?
Está montando un enrutador dentro de otro enrutador.
En ReactDom.render , está envolviendo su aplicación en BrowserRouter .
import { BrowserRouter } from 'react-router-dom'; // ... ReactDOM.render( <BrowserRouter basename={baseUrl}> // <-- this is the outer browser router <App /> </BrowserRouter>, rootElement ); Sin embargo, dentro de su aplicación monta otro BrowserRouter en su método de renderizado.
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; // ... render () { return ( <Router> // <-- this is the nested browser router <Routes> <Route path="/" element={ <Profile /> } /> <Route path="/Login" element={ <Login /> } /> </Routes> </Router> ); }Para solucionar el problema, simplemente elimine uno u otro.
El resto de tu código se ve bien.