como se puede deducir del título, pasar accesorios en reaccionar no funciona. Y no entiendo por qué.
import styled from 'styled-components'; const Login = (props) => { return<div>Login</div> } export default Login;En mi página App.js aquí está lo siguiente:
import './App.css'; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Login from './components/Login.js'; function App() { return ( <div className="App"> <Router> <Routes> <Route exact path="/" > <Login /> </Route> </Routes> </Router> </div> ); } export default App;Problema : si inicio el script y renderizo la página, no se muestra nada. ¿Qué estoy haciendo mal?
Debe pasar <Login /> como elemento. Prueba este código:
Aplicación.js:
import './App.css'; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Login from './components/Login.js'; function App() { return ( <div className="App"> <Router> <Routes> <Route exact path="/" element={<Login />} /> </Routes> </Router> </div> ); } export default App;<Login /> ... al componente Login de sesión no se le pasan accesorios, por lo que no esperaría ver ninguno en el componente. Su problema es un malentendido sobre cómo funciona el componente Route . Los únicos elementos secundarios válidos del componente de Route son otro componente de Route en el caso de rutas anidadas; de lo contrario, el contenido enrutado se pasa al accesorio de element del componente de Route como un ReactNode , también conocido como JSX.
declare function Route( props: RouteProps ): React.ReactElement | null; interface RouteProps { caseSensitive?: boolean; children?: React.ReactNode; element?: React.ReactNode | null; index?: boolean; path?: string; }
El componente de inicio de Login debe pasarse al element prop.
function App() { return ( <div className="App"> <Router> <Routes> <Route path="/" element={<Login />} /> </Routes> </Router> </div> ); } Para obtener más detalles/explicaciones, consulte ¿Por qué <Route> tiene un accesorio de element en lugar de render o component ?