Question

G＆＃39;天

按照旧版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级。没有调用ShowPeople。这是路由的变化吗？

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

我正在运行一个带有样板的React的早期版本我来自Udemy课程。直到几周前我才意识到这一点运行0.9x！

该应用程序只写了一半所以现在是加入本世纪的好时机。这是用于呈现的组件

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

干杯

Answer 1

您需要在路线中使用exact属性才能使其正常工作。

<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您有关于此属性的更多详细信息。

here你有一个现场演示。

在React 16中有更多的路线功能障碍

1 个答案: