More Route disfunction in React 16 - reactjs

Question

G'day
Following the tutorials in the older versions of React I have this in
my routes
<Route path="/people" component={People} />
<Route path="/people_new" component={CreatePeople} />
<Route path="/people/:email" component={ShowPeople} />
<Route path="/people_edit/:email" component={EditPeople} />
I have been implementing an upgrade to 16. The ShowPeople is not being called. Is this a change in the routing?
More code
people.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { apiGetData } from '../actions/api'; // our home spun API
import { FETCH_PEOPLE } from '../actions/api';
const API_KEY = ''; // not needed at the moment. reminder.
const URL = 'people';
//----------------------------
class People extends Component {
//--------------------
componentWillMount() {
const url = `${URL}${API_KEY}`; // target URI will fetch ALL entries
console.log('In people.js URL == ');
console.log(url);
this.props.apiGetData(FETCH_PEOPLE, url); // call the API
}
//-------------
renderPeople() {
console.log('In renderPeople :', this.props.people);
return this.props.people.map((person) => {
return(
<li className="list-group-item" key={person.id}>
<Link to={"/people/" + person.email}>
<strong>{person.name}</strong>
<span className="pull-right">{person.surname}</span>
</Link>
</li>
);
});
}
//--------
render() {
console.log('made it into People');
return(
<div>
<div className="jumbotron">
<h2>Asset-IQ - Live Build - May 2017</h2>
<h2>List of People</h2>
</div>
<div className="text-right">
<Link to="/people_new" className="btn btn-primary">
New Person
</Link>
</div>
<div>
<ul className="list-group">
{this.renderPeople()}
</ul>
</div>
</div>
);
}
}
//-------------------------------
function mapStateToProps(state) {
return { people: state.people.all };
}
//------------------------------------------------------------------------
export default connect(mapStateToProps, {apiGetData: apiGetData })(People);
//--------------------- EOF ---------------------------------------------
I was running a VERY early versionof React that came with a boilerplate
I got from a Udemy course. I didn't realise until a few weeks ago I was
running 0.9x!
The app is only half written so now is a good time to join this century.
Here is the component that USED to be rendered
// vim: set expandtab tabstop=4 shiftwidth=4 autoindent:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { apiGetData } from '../actions/api';
import { apiDeleteData } from '../actions/api';
import { FETCH_PERSON } from '../actions/api';
import { DELETE_PERSON } from '../actions/api';
//--------------------------------
class ShowPeople extends Component {
//--------------------
componentDidMount() {
const target = `people/${this.props.match.params.email}`; // email is the id passed in as a prop
console.log(target); // quick look at the value
this.props.apiGetData(FETCH_PERSON, target); // get the record from Python
}
//---------------
onDeleteClick() {
const target = `${this.props.match.params.email}`;
let ok = confirm("Sure you want to ZAP this mofo?");
if (ok) {
this.props.apiDeleteData(DELETE_PERSON, target).then(() =>
alert("They gone...."));
}
//browserHistory.push('/people'); HOW do we do this in React 16
}
//--------
render() {
const { person } = this.props;
console.log("In person");
console.log(person);
if (!person) {
return (
<div>
SPINNER....
</div>
);
}
//------
return (
<div>
<div className="jumbotron">
<h2>Asset-IQ - Live Build - May 2017</h2>
<h2>Person Detail</h2>
</div>
<h2>{person.name} {person.surname}</h2>
<Link to="/people" className="btn btn-primary">Back</Link>
<button className="btn btn-warning pull-right" onClick={this.onDeleteClick.bind(this)}>
Delete
</button>
</div>
);
}
}
//--------------------------------
function mapStateToProps(state) {
return { person: state.people.person };
}
//-----------------------------------------------------------------------------------
export default connect(mapStateToProps, { apiGetData, apiDeleteData })(ShowPeople);
//--------------------- EOF ---------------------------------------------------
Cheers

Answer 1

You need to use the exact attribute in your routes to make it work correctly.
<Route path="/people" exact component={People} />
<Route path="/people_new" component={CreatePeople} />
<Route path="/people/:email" component={ShowPeople} />
<Route path="/people_edit/:email" component={EditPeople}
Here you have more detailed information about this attribute.
And here you have a live demo.