Cómo usar la función de mapa con React Router?

Tengo una lista de nombres de páginas y una lista de URL de páginas. Me gustaría crear un enrutador que genere un componente de React para cada página en la lista y use una barra de navegación con enlaces de enrutador. Creo que el problema radica en la función forEach, pero no estoy seguro.

¿Alguien puede decirme qué estoy haciendo mal?

Aunque no me resultó útil, aquí hay una pregunta similar.

import React, { useState } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function App() {

const routes = [
    {
      name: 'home',
      path: '/'
    },
    {
      name: 'blog',
      path: '/blog'
    }
  ]

  // traduce (mapea) tu array de objetos en jsx
  const routeComponents = routes.map(({name, path}) => ((
    <route key="{name}" path="{path}">
      <h1>{name}</h1>
    </route>
  )))

  return (
    <div classname="App">
      <router>
        <navbar routes="{routes}"></navbar>
        <switch>
          {routeComponents}<br>
        </switch>
      </router>
    </div>
  );
}

export default App;

function Navbar(props) {
  const links = props.routes.map(({name, path}) => (
    <link key="{name}" to="{path}">{name}
  ))
  return(
    <div style="{{justifyContent:" "space-around",="" margin:"auto",="" display:"flex",justifycontent:"space-around",backgroundcolor:"red"}}="">
      {links}
    </div>
  )
}