0
220
ViewsReaccionar enrutamiento usando componentes (PageRenderer)
Estoy tratando de hacer un enrutamiento básico en React. Por lo general, lo que he hecho, y lo que mencionaré más adelante, es use element={<some page>} . Pero actualmente quiero aprender y experimentar qué otras opciones hay, así que me encontré con componentes en los que se inserta una función. Seguí un tutorial e hice exactamente lo mismo, excepto que el tutorial usa una versión anterior de router dom, por lo que no usa Rutas.
Aquí está el código:
Aplicación.js:
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom' import Register from './pages/register'; import Login from './pages/login'; import PageRender from './PageRender'; function App() { return ( <Router> <input type='checkbox' id='theme'/> <div className="App"> <div className="main"> <Routes> <Route exact path="/:page" component={PageRender}/> <Route exact path="/:page/:id" component={PageRender}/> </Routes> </div> </div> </Router> ); } export default App;PageRender.js:
import React from 'react' import { useParams } from 'react-router' import NotFound from './components/NotFound' const generatePage = (pageName) => { const component = () => require(`./pages/${pageName}`).default try { return React.createElement(component()) } catch (err) { return <NotFound /> } } const PageRender = () => { const {page, id} = useParams() let pageName = ""; if(id){ pageName = `${page}/[id]` }else{ pageName = `${page}` } return generatePage(pageName) } export default PageRenderEl inicio de sesión y el registro js son solo funciones de flecha básicas que muestran el inicio de sesión o el registro (todavía no llegué a esa parte). Lo que quiero hacer es cuando ingreso la url, digamos por ejemplo: http://localhost:3000/register, me envía a la página de registro y si ingreso una ruta incorrecta me enviará a la página "NotFound" . Pero lamentablemente, no funciona. Sé que puedo solucionar este problema si simplemente hago esto:
<Route exact path="/login" element={<Login/>}/>Este método funciona, pero actualmente estoy en proceso de aprendizaje y tengo curiosidad por qué este método no funcionó.
1 answers
Answer question0
Pude hacer que su código funcionara en react-router-dom v5, el truco fue importar los componentes una vez en la App para que se construyan/transpilen. El componente PageRender funcionó como está.
RRDv5
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; import './pages/register'; import "./pages/login"; import PageRender from "./PageRender"; export default function App() { return ( <Router> <input type="checkbox" id="theme" /> <div className="App"> <div className="main"> <Switch> <Route path="/:page/:id" component={PageRender} /> <Route path="/:page" component={PageRender} /> </Switch> </div> </div> </Router> ); } RRDv6: cambie el componente Switch al componente Routes y cambie a usar el element prop en lugar del component prop para representar el componente PageRender como JSX.
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; import './pages/register'; import "./pages/login"; import PageRender from "./PageRender"; export default function App() { return ( <Router> <input type="checkbox" id="theme" /> <div className="App"> <div className="main"> <Routes> <Route path="/:page/:id" element={<PageRender />} /> <Route path="/:page" element={<PageRender />} /> </Routes> </div> </div> </Router> ); } 