javascript - OwnProps Match and Params are undefined React-Router V3 - Stack Overflow

admin管理员组

文章数量:1335656

Trying to grab id from my url so that I can use it to fetchData on ponentDidMount. I'm also using it to set some state in the ponent to display information on the page. However, both ownProps.match and ownProps.params keeps ing through as undefined. I've tried a lot of things and all I can think of is that my / route is matching before thing/:id and it's causing an issue?

(I can use either and they fail like so). TypeError: this.props.params is undefined TypeError: this.props.match is undefined

Here are my routes:

export default (
  <Route path="/" ponent={App}>
    <Route path="login" ponent={requireNoAuthentication(LoginView)} />
    <Route path="register" ponent={requireNoAuthentication(RegisterView)} />
    <Route path="home" ponent={HomeContainer} />
    <Route path="thing/:id" ponent={ThingContainer} />
    <Route path="category" ponent={CategoryContainer} />
    <Route path="analytics" ponent={requireAuthentication(Analytics)} />
    <Route path="basic" ponent={requireNoAuthentication(BasicContainer)} />
    <Route path="*" ponent={DetermineAuth(NotFound)} />
  </Route>
);

mapStateToProps here (I've usually been menting out thing until I can figure out the issue so can ignore that one). Where I'm really seeing the issue is the const {id} portion.

function mapStateToProps(state, ownProps) {
  console.log(ownProps);
  return {
    data: state.data,
    token: state.auth.token,
    loaded: state.data.loaded,
    isFetching: state.data.isFetching,
    isAuthenticated: state.auth.isAuthenticated,
    thing: state.things[ownProps.match.params.id],
  };
}

Here's where a piece of my ponent that's giving me the headache.

 @connect(mapStateToProps, mapDispatchToProps)
    export class Thing extends Component {
      constructor(props) {
        super(props);
      }

      ponentDidMount() {
        const { id } = this.props.match.params;
        this.fetchData();
        this.props.fetchThing(id);
      }

Btw, ownProps is ing through just fine when I console.log it above. However it's missing any params/match which made me thing it was the route matching before it's intended match? That would be ridiculous though because I couldn't ever do a nested route without losing my react-router params?

I'm to the point now where I've started at it so long that I'm losing focus. Turning to some wonderful person for help!

Application is react 15.3, react-router v3, redux.

Trying to grab id from my url so that I can use it to fetchData on ponentDidMount. I'm also using it to set some state in the ponent to display information on the page. However, both ownProps.match and ownProps.params keeps ing through as undefined. I've tried a lot of things and all I can think of is that my / route is matching before thing/:id and it's causing an issue?

(I can use either and they fail like so). TypeError: this.props.params is undefined TypeError: this.props.match is undefined

Here are my routes:

export default (
  <Route path="/" ponent={App}>
    <Route path="login" ponent={requireNoAuthentication(LoginView)} />
    <Route path="register" ponent={requireNoAuthentication(RegisterView)} />
    <Route path="home" ponent={HomeContainer} />
    <Route path="thing/:id" ponent={ThingContainer} />
    <Route path="category" ponent={CategoryContainer} />
    <Route path="analytics" ponent={requireAuthentication(Analytics)} />
    <Route path="basic" ponent={requireNoAuthentication(BasicContainer)} />
    <Route path="*" ponent={DetermineAuth(NotFound)} />
  </Route>
);

mapStateToProps here (I've usually been menting out thing until I can figure out the issue so can ignore that one). Where I'm really seeing the issue is the const {id} portion.

function mapStateToProps(state, ownProps) {
  console.log(ownProps);
  return {
    data: state.data,
    token: state.auth.token,
    loaded: state.data.loaded,
    isFetching: state.data.isFetching,
    isAuthenticated: state.auth.isAuthenticated,
    thing: state.things[ownProps.match.params.id],
  };
}

Here's where a piece of my ponent that's giving me the headache.

 @connect(mapStateToProps, mapDispatchToProps)
    export class Thing extends Component {
      constructor(props) {
        super(props);
      }

      ponentDidMount() {
        const { id } = this.props.match.params;
        this.fetchData();
        this.props.fetchThing(id);
      }

Btw, ownProps is ing through just fine when I console.log it above. However it's missing any params/match which made me thing it was the route matching before it's intended match? That would be ridiculous though because I couldn't ever do a nested route without losing my react-router params?

I'm to the point now where I've started at it so long that I'm losing focus. Turning to some wonderful person for help!

Application is react 15.3, react-router v3, redux.

• javascript
• reactjs
• redux
• react-router

Share Improve this question Follow edited Nov 18, 2017 at 18:31 dizzy asked Nov 18, 2017 at 18:23 dizzydizzy 1,27722 gold badges1515 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I see that you r rendering "ThingContainer" but ur class is an "Thing". Where r u using a HOC? Did you remember to pass all the props to the child ?

Example:

const ThingContainer = (props) => <Thing ...props />

The props object returned from mapStateToProps() should include ownProps.match if you want to use it in your ponent. Either add it as another property, or merge ownProps into the object being returned.

本文标签： javascriptOwnProps Match and Params are undefined ReactRouter V3Stack Overflow