Estaba usando este código sin el componente BrowserRouter que envolvía el Switch y funcionó bien. Cuando hice algunas pruebas de broma, obtuve el siguiente error Invariant failed: Browser history needs a DOM que dice que el componente de Link no se puede usar fuera de un enrutador. De hecho, no estaba usando el enrutador. Cuando agregué el enrutador, la URL está cambiando pero los componentes no se redirigen correctamente. ¿Lo hice correctamente?
import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; export const _routes = [ { component: Home, path: '/', exact: true }, { component: Orders, path: '/orders', exact: false }, { component: OrderConfirm, path: '/order-confirm', exact: false } ] const App = () => <> <Navbar /> <Router> <Switch> {_routes.map(route => <Route key={route.path} path={route.path} component={route.component} exact={route.exact} />)} </Switch> </Router> </>Esto debería funcionar como se esperaba:
export const _routes = [ { component: 'Home', path: '/', exact: true }, { component: 'Orders', path: '/orders', exact: false }, { component: 'OrderConfirm', path: '/order-confirm', exact: false } ] const App = () => <> <Navbar /> <Router> <Switch> {_routes.map(route => <Route key={route.path} path={route.path} component=require(`./components/${route.component}`).default exact={route.exact} />)} </Switch> </Router> </> Supongo que sus componentes están dentro del paquete de components (este ./components/${route.component} debería ser la ruta a su componente)