Reactjs React 16中的更多路由功能失效

吉日

按照旧版本的React中的教程，我在 我的路线

<Route path="/people"                   component={People}                          />
<Route path="/people_new"               component={CreatePeople}                    />
<Route path="/people/:email"            component={ShowPeople}                      />
<Route path="/people_edit/:email"       component={EditPeople}                      />

我一直在实施到16的升级。演艺人员没有被叫来。这是路线的改变吗

更多代码 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 ---------------------------------------------

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从'react router dom'导入{Link}；
从“../actions/api”；/”导入{apiGetData}我们的国产API
从“../actions/api”导入{FETCH_PEOPLE}；
常量API_键=“”；//目前不需要。提醒
const URL=‘people’；
//----------------------------
类人员扩展组件{
//--------------------
组件willmount（）{
常量url=`${url}${API_KEY}`；//目标URI将获取所有条目
log（'In people.js URL='）；
console.log（url）；
this.props.apiGetData（FETCH_PEOPLE，url）；//调用API
}
//-------------
renderPeople（）{
log（'In renderPeople:'，this.props.people）；
返回此.props.people.map（（person）=>{
返回(

{person.name}
{个人姓氏}

);
});
}
//--------
render（）{
console.log（'make-it-into-People'）；
返回(
资产智商-现场建造-2017年5月
人员名单
新人

{this.renderPeople（）}

);
}
}
//-------------------------------
函数MapStateTops（状态）{
返回{people:state.people.all}；
}
//------------------------------------------------------------------------
导出默认连接（mapstatetops，{apiGetData:apiGetData}）（人）；
//---------------------EOF---------------------------------------------

我正在运行React的早期版本，它附带了一个样板 我从一个学生那里学到了我的课程。直到几周前我才意识到我是 运行0.9倍

该应用程序只编写了一半，因此现在是加入本世纪的好时机。 这是以前渲染的组件

// 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 ---------------------------------------------------

//vim:set expandtab tabstop=4 shiftwidth=4自动缩进：
从“React”导入React，{Component}；
从'react redux'导入{connect}；
从'react router dom'导入{Link}；
从“../actions/api”导入{apiGetData}；
从“../actions/api”导入{apiDeleteData}；
从“../actions/api”导入{FETCH_PERSON}；
从“../actions/api”导入{DELETE_PERSON}；
//--------------------------------
类ShowPeople扩展组件{
//--------------------
componentDidMount（）{
const target=`people/${this.props.match.params.email}`；//email是作为道具传入的id
console.log（target）；//快速查看值
this.props.apiGetData（FETCH_PERSON，target）；//从Python获取记录
}
//---------------
onDeleteClick（）{
const target=${this.props.match.params.email}；
let ok=确认（“确定要终止此mofo？”）；
如果（确定）{
this.props.apideetedata（DELETE_PERSON，target）。然后（（）=>
警惕（“他们走了……”）；
}
//browserHistory.push（“/people”）；我们在React 16中如何做到这一点
}
//--------
render（）{
const{person}=this.props；
控制台。登录（“亲自”）；
控制台日志（个人）；
如果（！人）{
返回(
纺纱机。。。。
);
}
//------
返回(
资产智商-现场建造-2017年5月
人员详细信息
{人名}{人名}
返回
删除
);
}
}
//--------------------------------
函数MapStateTops（状态）{
返回{person:state.people.person}；
}
//-----------------------------------------------------------------------------------
导出默认连接（mapstatetops，{apiGetData，apideetedata}）（ShowPeople）；
//---------------------EOF---------------------------------------------------

---

干杯

您需要在路线中使用

精确

属性，以使其正常工作

<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}

您正在使用哪个版本的react路由器？react路由器dom^4.2.2react-router v4与react 16兼容。。。你是怎么写你的网址的？能否显示正在渲染路由的组件和未渲染的
ShowPeople
组件？如果
路由
位于
开关
组件内，则仅渲染第一个匹配项，在这种情况下，必须添加
精确
。如果不是，则渲染每个匹配的路由。“得不到”是另一个（常见）问题，你可以找到很多答案！明白了，没错。谢谢你，伙计！这是我最后一次换成16只虫子。我希望如此！“这就是答案”复选框到哪里去了？我不想扫兴，但如果这门课程有测试部分的话。。。哈哈。要将答案标记为正确，您可以