react-router-dom doesn't redirect to the linked page, instead it shows the content of the linked page below the menu | ReactJS

I’m currently trying to get my footer navmenu to work. It seemed like react-router-dom was the best choice for that, but I can’t get it to redirect to the linked page. Instead the content of the Linked page shows up below the menu.

<Router>
  <div
    style={{
      textAlign: "center",
      alignItems: "center",
      alignContent: "center"
    }}
  >
    <a style={{ marginRight: "10px", fontSize: "20px" }}>
      Impressum
    </a>
    <a style={{ marginRight: "10px", fontSize: "20px" }}>
      <Link to="/Datenschutz">Datenschutz</Link>
    </a>
    <a style={{ marginRight: "10px", fontSize: "20px" }}>
      Kontakt
    </a>
  </div>
  <Routes>
    <Route
      path="/Datenschutz"
      element={<Datenschutz />}
    />
  </Routes>
</Router>

I recreated the issue in codesandbox

https://codesandbox.io/s/headless-shape-rghsi7?file=/src/footer.js

>Solution :

You are rendering the router and route in the Footer component.

Move the Router and routes from Footer into the App component. By promoting the Router higher in the ReactTree the routing context it provides is available to all the components under it. The links in the Footer will allow navigation to routes rendered in App.

Example:

import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";
import Footer1 from "./footer";
import Datenschutz from "./Datenschutz";
import "./styles.css";

export default function App() {
  return (
    <Router>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Routes>
          <Route path="/Datenschutz" element={<Datenschutz />} />
        </Routes>
        <Footer1 />
      </div>
    </Router>
  );
}