Estoy tratando de agregar una barra de navegación al archivo app.js que tengo en reaccionar. Cuando cargo la página, los archivos de ruta se cargan, pero los archivos de enlace establecidos en la barra de navegación no aparecen.

Esta es la página de la barra de navegación

 import React from 'react'; import { Link } from 'react-router-dom'; const NavBar = () => ( <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/article">Article</Link> </li> <li> <Link to="/article-list">Article List</Link> </li> </ul> </nav> ) export default NavBar;

Luego, debajo está el archivo app.js

 import Homepage from './Pages/Homepage'; import AboutPage from './Pages/AboutPage'; import ArticlesList from './Pages/ArticlesList'; import ArticlePage from './Pages/ArticlePage'; import NavBar from './NavBar'; import {Routes, Route} from 'react-router-dom'; import './App.css'; function App() { return ( <Routes> <div className="App"> <NavBar /> <div id="page-body"> <Route path="/" element={<Homepage />} /> <Route path="/about" element={<AboutPage />}/> <Route path="/article-list" element={<ArticlesList />} /> <Route path="/article" element={<ArticlePage />} /> </div> </div> </Routes> ); } export default App;

Mantengo NavBar fuera de la carpeta de páginas. No sé qué podría ser.

Por si acaso, la versión de react-router-dom que tengo en mi archivo package.json es:

 "react-router-dom": "^6.0.0-beta.6",

archivo index.js:

 import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter as Router} from "react-router-dom"; import './index.css'; import App from './App'; ReactDOM.render( <Router> <App /> </Router>, document.getElementById('root') );