Teniendo el siguiente código:
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom'; export function MyComponent({ list }: MyComponentProps) { return ( <Router> <Switch> <Route path={list[0].url} component={<NextComponent />} /> </Switch> </Router> ); }Quiero cargar un componente diferente en esa ruta.
La versión de react-router-dom es 5.2.0.
Este código no funciona, aparece una línea roja debajo de <Route path... indicando esto:
Operator '<' cannot be applied to types 'number' and 'typeof Route'.ts(2365) (alias) class Route<T extends {} = {}, Path extends string = string> import Route¿Algunas ideas?
EDICIÓN POSTERIOR:
Hay una respuesta que indica que reemplazar esa línea con component={NextComponent} eliminará el mensaje de error. Eso es cierto, pero ¿es posible enviar accesorios a ese componente en este caso?
Por ejemplo, para component={<NextComponent someProps={something} />} parece posible pero no para component={NextComponent}
En react-router-dom v5, no especifica el accesorio del component como un literal JSX (la sintaxis RRDv6), solo pasa una referencia al componente.
component={NextComponent} en lugar de component={<NextComponent />}
Código
export function MyComponent({ list }: MyComponentProps) { return ( <Router> <Switch> <Route path={list[0].url} component={NextComponent} /> </Switch> </Router> ); } Si necesita pasar accesorios adicionales, debe usar el accesorio de render . Esto efectivamente representa un componente React anónimo. No olvide que es posible que también deba pasar los accesorios de ruta a los componentes renderizados.
export function MyComponent({ list }: MyComponentProps) { return ( <Router> <Switch> <Route path={list[0].url} render={props => <NextComponent {...props} something={value} />} /> </Switch> </Router> ); }