Creé una ruta en mi proyecto de reacción utilizando los métodos de react-router-dom versión 6.2.1.
Pero cuando traté de obtener una ruta de un componente funcional escrito en el mismo componente de implementación, no funcionó.
Aplicación.js
import React from 'react'; import './App.css'; import {Routes ,Route} from 'react-router-dom'; import HomePage from './pages/homepage/homepage.component'; const CarsPage= () => { <div> <h1>CARS PAGE</h1> </div> } function App() { return ( <div> <Routes > <Route exact path='/' element={<HomePage />} /> <Route exact path='/cars' element={<CarsPage/>} /> // This route is not working. </Routes> </div> ); } export default App;La ruta de los sombreros no está recogiendo.
Olvidaste la declaración de return en CarsPage
cambiarlo a:
const CarsPage= () => { return ( <div> <h1>CARS PAGE</h1> </div> ) }Debe envolver los componentes en BrowserRouter. Ver todo funciona aquí:https://codesandbox.io/s/festive-leavitt-7tr1d?file=/src/App.js
Mirando la implementación anterior, el componente CarsPage no devuelve nada. Refactorícelo para devolver su JSX así.
const CarsPage = () => ( <div> <h1>CARS PAGE</h1> </div> ); Además, importe BrowserRouter desde "react-router-dom" y envuelva el componente "react-router-dom" <Routes /> con BrowserRouter como se ve en los documentos así
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; ... function App() { return ( <div> <Router> <Routes> <Route exact path="/" element={<HomePage />} /> <Route exact path="/cars" element={<CarsPage />} /> </Routes> </Router> </div> ); }