Debe leer detenidamente la documentación de react-router-dom. Según la documentación,

Si está utilizando la última versión de react-router-dom, es decir, @ 6.3.0, debe usar {Rutas} en lugar de {Cambiar}. De lo contrario, puede usar { Switch } para versiones anteriores de react-router-dom.

1. Debe importar { BrowserRouter as Router, Switch, Route } desde "react-router-dom" en su archivo App.js.
2. Solo necesita envolver sus respectivas rutas dentro del elemento Router y dejar todos los demás componentes fuera del elemento, es decir, componente.
3. Debe escribir sus componentes en forma de elementos HTML dentro de la etiqueta.

Su archivo App.js debería tener el mismo aspecto que el siguiente:

 import React from "react"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import Artists from './Artists'; import Home from './Home'; import Music from './Music'; import Navigation from "./Navigation.js"; import 'react-bootstrap/dist/react-bootstrap.min.js'; import Footer from './footer' export default function App() { return ( <Router> <div> <Navigation/> <Switch> <Route exact path="/" component={<Home />} /> <Route path="/artists" component={<Artists />} /> <Route exact path="/music" component={<Music />} /> </Switch> </div> </Router> ); } export default App

Si desea obtener un componente específico en alguna acción, por ejemplo, onClick, como dentro de un componente de navegación, solo necesita importar { LinkContainer } o { Link } desde "react-router-dom", porque Link y LinkContainer, ambos se comportan de la misma manera camino. Por lo tanto, no necesita importar ambos a la vez en un solo archivo. Importar enrutador y ruta no tiene sentido en el archivo Navigation.js. Dado que no está haciendo ningún uso de los componentes Artist y Home dentro del archivo Navigation.js, no es necesario que los importe a Navigation.js.

Su archivo Navigation.js debería tener el mismo aspecto que el siguiente:

 import { link } from "react-router-dom" import React from "react"; import { Button, Navbar, Container} from 'react-bootstrap' import Nav from "react-bootstrap/Nav"; const Navigation = () => { return ( <Navbar bg="light" variant="light"> <Navbar.Brand> <img src={require('.//Nothing Iconic Reccords.png')} width="135" height="135"/> </Navbar.Brand> <Nav className="nav-link"> <LinkContainer to="/"> <Nav.Link>Home</Nav.Link> </LinkContainer> <LinkContainer to="/artists"> <Nav.Link>Artists</Nav.Link> </LinkContainer> <LinkContainer to="/music"> <Nav.Link>Music</Nav.Link> </LinkContainer> </Nav> </Navbar> ); }; export default Navigation;

Para reaccionar enrutador 5 o inferior

Te falta un contenedor importante llamado <Switch> que envuelve tus rutas (elementos <Route> ), en tu archivo App.js. Aquí está la guía de inicio rápido que describe la estructura.

 <Router> <Switch> <Route path="/about"> <About /> </Route> </Switch> </Router>

Sin este contenedor (o similares como se describe en la documentación), el enrutador de reacción no sabe qué lógica coincidente desea aplicar, por lo que no puede representar una página/ruta específica.

Si está utilizando el enrutador React 6 (versión más reciente), debe volver a escribir toda la sintaxis.

Para React router 6 (versión más reciente) Tienes que ordenar tus rutas así:

 <BrowserRouter> <Routes> <Route path="/" element={<App />}/> </Routes> </BrowserRouter>

Este enlace profundiza más sobre esto.

Intente usar rutas, coloque la ruta en las rutas y agregue elementos de accesorios en la ruta:

 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/artists" element={<Artists />} /> <Route path="/music" element={<Music />} /> </Routes> </Router>