Cómo crear una ruta que pueda manejar cero, uno, el otro o ambos parámetros a la vez (react router v5).
Por ejemplo:
/offers /offers/q-shoes /offers/London /offers/London/q-shoes
Estoy tratando de lograrlo de esta manera, desafortunadamente, en este caso, la ruta /offers/London y /offers no se capturan
import React from 'react'; import pathToRegexp from 'path-to-regexp'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import { Home, Browse } from './Pages'; const re = pathToRegexp('/offers/:location?/q-:search?'); const App = () => ( <Router> <Switch> <Route path={re}> <Browse /> </Route> <Route path="/"> <Home /> </Route> </Switch> </Router> ); export default App;De acuerdo con la documentación , puede usar una cadena o una matriz de cadenas como ruta.
Función pathToRegexp que devuelve un objeto RegEx para que no pueda usarlo. En su lugar, debe usar una matriz de cadenas, con el orden de más específico a menos específico.
import React from "react"; import { BrowserRouter as Router, Route, Switch, Link, withRouter } from "react-router-dom"; const Component = withRouter((props) => { return ( <div> <div>{props.title}</div> <div>{JSON.stringify(props.match.params)}</div> </div> ); }); const Home = () => <Component title="Home" />; const Browse = () => <Component title="Browse" />; const NoMatch = () => <Component title="NoMatch" />; const pathArray = ["/offers/:location?/q-:search?", "/offers/:location?"]; const App = () => ( <Router> <div style={{ display: "flex", flexDirection: "column" }}> <Link to="/">/Home</Link> <Link to="/offers">/offers</Link> <Link to="/offers/q-shoes">/offers/q-shoes</Link> <Link to="/offers/London">/offers/London</Link> <Link to="/offers/London/q-shoes">/offers/London/q-shoes</Link> </div> <Switch> <Route path={pathArray}> <Browse /> </Route> <Route path="/"> <Home /> </Route> <Route> <NoMatch /> </Route> </Switch> </Router> ); export default App;