named path not working in react-router-dom react js - reactjs

Question

I am using react-router-dom for routing purposes. This is my code:
//Libraries
import React from 'react';
import { Tabs, Tab } from 'react-tabify';
import { connect } from 'react-redux';
import {
BrowserRouter as Router,
Route,
withRouter
} from 'react-router-dom';
//Components
import HomePage from './containers/HomePage';
import PersonsPage from './containers/PersonsPage';
const App = () => (
<Router>
<div style={{height: '100%', width: '100%'}}>
<Route exact path="/" component={HomePage}/>
<Route exact path="/:id" component={PersonsPage}/>
// here i want to use like this --> <Route exact path="/personPage/:id" component={PersonsPage}/>
</div>
</Router>
)
export default withRouter(connect()(App));
Route exact path="/:id" component={PersonsPage}/> this works , but this Route exact path="/personPage/:id" component={PersonsPage}/> this didn't works for me . Can someone clarify/help me from this pls

Answer 1

I think you should simply wrap your routers in Switch component. But remember to put <Route exact path="/:id" component={PersonsPage}/> as last entry.
Here you have an example in one file:
import React, { Component } from 'react';
import { render } from 'react-dom';
import {
BrowserRouter as Router,
Route,
Switch,
Link,
withRouter
} from 'react-router-dom';
const HomePage = () => (
<div>
<h1>HomePage</h1>
<ul>
<li><Link to="/user/Tom">Tom</Link></li>
<li><Link to="/user/John">John</Link></li>
<li><Link to="/user/Andy">Andy</Link></li>
</ul>
</div>
);
const PersonsPage = (props) => (
<div>
<h1>Profile: {props.match.params.name}</h1>
</div>
);
class App extends Component {
render() {
return (
<Switch>
<Route exact path="/" component={HomePage}/>
<Route exact path="/user/:name" component={PersonsPage}/>
</Switch>
);
}
}
const AppWithRouter = withRouter(App);
render(
<Router>
<AppWithRouter />
</Router>
, document.getElementById('root')
);
Here you have link to working version https://stackblitz.com/edit/react-qqpraz