React Router mit Parametern funktioniert nicht

Question

Ich habe eine Todo-App, die ich versuche, ein Element auszuwählen und es an eine Seite zur Bearbeitung senden. Ich habe einen Blick auf diesen Beitrag Getting query parameters from react-router hash fragment und bemerkte, dass sie this.props.location.query

Was ich versuche zu erreichen ist, um die Abfrage param und zeigen sie in das Eingabefeld zur Bearbeitung.

import * as React from 'react' 
import { Router, Route, IndexRoute, hashHistory, browserHistory, Link }  from 'react-router' 
import {ITask, IStoreAction, ActionType} from '../model/TasksModel' 

import store from '../store/Store' 

interface TaskEditProp { 
task: ITask 

} 

class TaskEdit extends React.Component<TaskEditProp, {}>{ 
constructor() { 
    super(); 
    this.state = store.getState() 

    store.subscribe(() => { 
     this.setState(store.getState()) 
    }) 

    //todo: console.log(this.props.location); 

} 

onSave = (e) => { 
    e.preventDefault(); 
    var refs: any = this.refs; 
    var task: ITask = { 
     index: this.props.task ? this.props.task.index : 0, 
     text: refs.text.value, 
     done: false 
    } 

    var storeAction: IStoreAction = { 
     type: ActionType.EDIT_TASK, 
     task 
    } 

    store.dispatch(storeAction) 
    browserHistory.push('/') 
} 

onCancel = (e) => { 
    e.preventDefault(); 
    browserHistory.push('/') 
} 

render() { 

    const { props: { children } } = this; 
    return (
     <div className=""> 
      <h3>Edit Task</h3> 
      <form onSubmit={this.onSave}> 
       <fieldset className="form-group"> 
        <label for="task">Task</label> 
        <input type="text" ref="text" className="form-control" >{this.props.location}</input> 
       </fieldset> 
       <div className="btn-group"> 
        <button className="btn btn-primary" >Save</button> 
        <button className="btn btn-warning" onClick={this.onCancel} >Cancel</button> 
       </div> 
      </form> 

     </div> 
    ) 
} 
} 

export default TaskEdit; 

Ich gehe davon aus meiner Schnittstelle nicht Standort enthält so Requisiten nicht über Standort nicht kennt.

Hier sind, wie meine Routen definiert sind:

var Routes = (
    <Router history={browserHistory}> 
     <Route path="/" component={Tasks}> 
      <IndexRoute component={TaskList} /> 
      <Route path="/add" component={TaskAdd} /> 
      <Route path="/edit/:id" component={TaskEdit} /> 
     </Route> 
     <Route path="/about" component={About}/> 
    </Router> 
) 

Afer meinem Speicher hat geschickt worden, ich browserHistory.push('/edit/'+task.index) nenne, die mich auf die richtige Ansicht zu senden, aber ich kann die Abfrage params nicht darauf zugreifen. Der Rest meines Codes kann bei https://github.com/crh225/HotReactAsp/tree/master/src/HotReactAsp/content gefunden werden Dank!

Answer 1

Sie könnten einfach Ihre this.props drucken, um zu sehen, wie die Requisiten präsentiert werden und einen korrekten Weg finden, benötigte Daten zu extrahieren.

Ich weiß nicht, welche Version von react-router Sie verwenden, aber als ich die richtige Art und Weise kennen Abfrage params zu erhalten ist:

let { id } = this.props.params; 

und diese

index: this.props.task ? this.props.task.index : 0, 

wird

index: this.props.params.id ? this.props.params.id : 0,