Soy nuevo en el enrutamiento en react.JS, sin embargo, he tenido problemas porque los productos simples.jsx deberían devolver un mensaje simple cuando hago clic, pero nadie lo muestra.
Código Index.JS
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter> , document.getElementById('root')); registerServiceWorker();código en App.JS
import React, { Component } from "react"; import NavBar from "./components/navbar"; import { Route, Routes } from 'react-router-dom'; import Products from "./components/products"; import "./App.css"; class App extends Component { render() { return ( <div> <NavBar /> <Routes> <Route path= "/products" component={Products}></Route> </Routes> </div> ); } } export default App;nav.jsx
import React from "react"; const NavBar = () => { return ( <ul> <li> <a href="/">Home</a> </li> <li> <a href="/products">Products</a> </li> <li> <a href="/posts/2018/06">Posts</a> </li> <li> <a href="/admin">Admin</a> </li> </ul> ); }; export default NavBar;código de productos.jsx
const Product = () => { return <h1>Products</h1>; }; export default Product;No sé básicamente lo que me estoy perdiendo.
En react-router-dom v6, los componentes de la Route representan sus componentes en el accesorio del element como JSX .
<Route path="/products" element={<Products />} /> Si todavía está usando v5 y acaba de mezclar la documentación, entonces en v5 use Switch en su lugar ( Routes replaced Switch en v6 ) y use el accesorio de component como lo estaba.
<Switch> <Route path="/products" component={Products} /> </Switch>Si está utilizando react-router-dom 6, debe usar el elemento en lugar del componente dentro de cada ruta como esta:
<Routes> <Route path= "/products" element={<Products/>}></Route> </Routes>si está utilizando react-router-dom 5, debe usar Switch en lugar de Routes, así:
<Switch> <Route path= "/products" component={Products}></Route> </Switch>