You need to carefully read the react-router-dom documentation. According to the documentation,

If you're using the latest version of react-router-dom i.e. @6.3.0, you must use { Routes } instead of { Switch }. Otherwise, you're good to go with { Switch } for older versions of react-router-dom.

1. You must import { BrowserRouter as Router, Switch, Route } from "react-router-dom" in your App.js file.
2. You only need to wrap your respective routes inside the Router element and leave everyother component outside of element i.e. component.
3. You need to write your components in the form of HTML elements inside tag.

Your App.js file should look as same as the one below:

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

If you want to get a specific component on some action e.g. onClick, like inside a navigation component, you only need to import { LinkContainer } or { Link } from "react-router-dom", because Link and LinkContainer, both behave the same way. So you don't need to import both of them at a time in a single file. Importing Router and Route make no sense in the Navigation.js file. Since you are not making any use of the Artist and Home components inside the Navigation.js file, you are not required to import them into Navigation.js.

Your Navigation.js file should look as same as the one below:

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;

For react router 5 or below

You're missing an important wrapper called <Switch> that wraps around your routes (<Route> elements), in your App.js file. Here's the quickstart guide describing the structure.

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

Without this wrapper (or similar ones as described in the documentation) , react router doesn't know what matching logic you want to apply, so it can't render a specific page/route.

If you are using React router 6 (most recent version), the entire syntax needs to be re-written.

For React router 6 (most recent version) The you have to order your routes like so:

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

This is link goes more in-depth about this

Try using routes, put route in routes and add props element in route:

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>