How to create a path that can handle zero, one, the other or both parameters at once (react router v5).
For example:
/offers /offers/q-shoes /offers/London /offers/London/q-shoes
I am trying to achieve it this way, unfortunately in this case the path /offers/London and /offers is not captured
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;
According to documentation you can use string or array of strings as path.
pathToRegexp function returning a RegEx object so you cannot use it. Instead, you should use an array of strings, with the order being more specific to less specific.
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;