Configuré un nuevo proyecto de reacción con "npx create-react-app name". Traté de limpiar todos los archivos que no necesitaba, excepto los que eran necesarios, por supuesto, pero ahora no aparece nada. Tuve problemas con el enrutador de reacción y las rutas cuando tampoco funcionó.
índice.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>KassaSysteem</title> </head> <body> <div id="root"></div> </body> </html>índice.js:
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );Aplicación.js
import './App.css'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom' import Login from './pages/Login'; function App() { return ( <Router> <div className='App'> <Routes> <Route path="/" exact component={Home}/> <Route path="/login" component={Login}/> </Routes> </div> </Router> ); } const Home = () => { <form> <input type="email" placeholder='your email here'/> <input placeholder='displayname'/> <input type="password" placeholder='your password here'/> </form> } export default App;Iniciar sesión.js
import React from 'react' function Login() { return ( <div> <h1>login</h1> </div> ) } export default LoginEstos son todos los archivos que tengo, excepto los archivos CSS. Si alguien sabe lo que estoy haciendo mal, por favor comente.
instale la versión anterior de react-router-dom que es 5.2.0,
o puede ejecutar npm i react-router-dom@5.2.0 y reiniciar su servidor, lo que significa que npm start y funcionó y su componente de inicio debería ser así.
const Home = () => { return( <form> <input type="email" placeholder='your email here'/> <input placeholder='displayname'/> <input type="password" placeholder='your password here'/> </form> ) }si usa la última versión (v6) usa este código
import './App.css'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom' import Login from './pages/Login'; function App() { return ( <Router> <div className='App'> <Routes> <Route path="/" element={<Home />} /> <Route path="/login" element={<Login />}/> </Routes> </div> </Router> ); } function Home () { return ( <form> <input type="email" placeholder='your email here'/> <input placeholder='displayname'/> <input type="password" placeholder='your password here'/> </form> ) } export default App;