2017-08-29 2 views
1

Ich bin neu in React, React Router (v4) und Redux. Ich versuche, einen URL-Parameter von mapStateToProps(state, ownProps) durch Zugriff auf ownProps.match.params.id zuzugreifen, aber das params Array ist immer leer. Ich habe den Debugger verwendet, um OwnProps zu überprüfen, und der id Parameter, der übergeben werden soll, ist nirgends in ownProps.mapStateToProps ownProps Parameter sind leer

Hier ist ein Ausschnitt aus meinen Routen:

<Switch> 
     <Route exact path='/' component={HomePage} /> 
     <Route path='/about' component={AboutPage} /> 
     <Route path='/course' component={ManageCoursePage} /> 
     <Route path='/course/:id' component={ManageCoursePage} /> 
     <Route path='/courses' component={CoursesPage} /> 
    </Switch> 

Hier ist der relevante Code aus ManageCoursePage.js:

class ManageCoursePage extends React.Component { 
    constructor(props, context) { 
    super(props, context); 

    this.state = { 
     course: Object.assign({}, props.course), 
     errors: {}, 
    }; 
    } 
} 

function mapStateToProps(state, ownProps) { 
    const courseId = ownProps.match.params.id; 
    ... 
} 

export default connect(mapStateToProps, mapDispatchToProps)(ManageCoursePage); 

Antwort

3

Sie haben die Reihenfolge der folgenden Routen zu kippen oder die exact Eigenschaft auf die erste Route.

<Route path='/course' component={ManageCoursePage} /> 
<Route path='/course/:id' component={ManageCoursePage} /> 

/course Matches vor /course/:id das ist, warum ManageCoursePage ohne id Parameter aufgerufen wird. Wenn Sie nur /course in Ihrer ersten Route und nicht /course/123 übereinstimmen möchten, können Sie die exact property setzen.

Verwandte Themen