Can't get Params from id routes - reactjs

Question

I'm stuck with a problem in my project. I'm trying to show a component and work with the this.props.match.params, but no matter what I do I get undefined.
Routes:
const App = () => (
<BrowserRouter>
<Fragment>
<Header/>
<main>
<Switch>
<Route path="/show/:id" component={Show}/>
<Route path="/" component={Home}/>
</Switch>
</main>
</Fragment>
</BrowserRouter>
);
export default App;
then I have a handler on my home route:
async handleSubmit(searchId) {
const id = await DwellingService.findSiocId(searchId);
if (id) {
this.props.history.push(`/show/${id}`);
}
}
and finally on my show component
componentDidMount() {
console.log(this.props.match.params)
const {id} = this.props.match.params;
if (id) {
this.props.requestFindDwelling(id);
}
}
So I have been researching and I think is not a react router problem, first when I try to access the routes by typing them I was getting unexpected > on my bundle.js which was solved adding <base href="/" /> on the index.html.
Now my component is rendering ok by the console.log of the show component is giving me this:
isExact:false
params:{}
path:"/show"
url:"/show"
When I started the project to be able to use browserhistory and not getting error by refreshing the page I had to add this to my index file:
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, './public/index.html'), function(err) {
if (err) {
res.status(500).send(err);
}
});
});
For the kind of error I get I'm supposing the route is not being found and is redirecting me to /show.

Answer 1

<Switch>
<Route path="/show/:id" component={Show}/>
<Route path="/" component={Home}/>
</Switch>
This will never render Home as Switch renders first thing that matches and / will match always the first route. Not sure if this will fix the problem but try and let me know:
<Switch>
<Route exact path="/" component={Home}/> // exact is important
<Route path="/show/:id" component={Show}/>
</Switch>