[índice.js]
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"; import 'bootstrap/dist/css/bootstrap.min.css'; import clayful from 'clayful/client-js'; import axios from 'axios'; clayful.config({ client: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6ImE0Mzg5MjhjNWZkNjFiNzkwNzc5OTU3MGRiZmUyYzE5ZTQ...' }); clayful.install('request', require('clayful/plugins/request-axios')(axios)); ReactDOM.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode>, document.getElementById('root') );[Aplicación.js]
import logo from './logo.svg'; import React from 'react'; import './App.css'; import { Route, Router } from "react-router-dom"; import LandingPage from './pages/LandingPage/LandingPage'; import LoginPage from './pages/LoginPage/LoginPage'; import RegisterPage from './pages/RegisterPage/RegisterPage'; function App() { return ( <Router> <Route path="/" element={<LandingPage />} /> <Route path="/login" element={<LoginPage />} /> <Route path="/register" element={<RegisterPage />} /> </Router> ); } export default App;Error de reacción: no puede representar un dentro de otro. Nunca debe tener más que en su aplicación> se produce un error. Dales una mano. ¿Es "react-router-dom" el problema? ¿Es por "react6" o tenemos que cambiar a "react5"?
Está utilizando dos enrutadores, como sugiere el mensaje de error.
Tienes uno en index.js:
<BrowserRouter>Y otro en App.js
<Router> Pruébelo sin el <Router> en App.js.
Tanto BrowserRouter como Router se consideran enrutadores. Parece que puede tener un error tipográfico y debe reemplazar <Router> con <Routes> en App.js.
App.js en Router -> Cambio de rutas.