1

I need to pass data forward to another component via <Link> from the react-router-native library. This worked a couple of months ago, then I upgraded RN and all of the packages that I use and it's no longer working. I found an answer which I thought related to my problem on Stack Overflow that involved changing the syntax of the props in my <Link> from:

to={{ pathname: "/search-method/", state: { ingreds: ingreds, more_needed: true } }}

to:

to="/search-method/" state={{ ingreds: ingreds, more_needed: true }}

Changing this syntax fixed the initial problem but when the next component loaded it couldn't retrieve the state data as it had before. Here's the relevant code from the next component:

componentDidMount() {
  console.log("Search method mounted")
  var ingreds = this.props.location.state.ingreds
  var more_needed = this.props.location.state.more_needed
  var no_more_needed = this.props.location.state.no_more_needed
  var initial = this.props.location.state.initial_data
  if (initial !== undefined) {
    this.setState({
      initialData: initial,
      ingredients_rough: ingreds,
      moreNeeded: more_needed
    })
  } else {
    this.setState({
      ingredients_rough: ingreds,
      moreNeeded: more_needed
    })
  }
}

and the error points to the line var ingreds = this.props.location. < this full stop specifically, giving an error message, "TypeError: Cannot read property 'state' of undefined ".

Googling only seems to return results relating to react.js and react-router-dom, I can't find any answers as to why this is no longer working for React Native, in the package I'm using which worked fine before upgrading everything. Here's what I'm importing:

import { NativeRouter, Route, Link, Redirect } from "react-router-native";

Thanks in advance if you can help.

jem4789
  • 89
  • 9
  • 1
    Does this answer your question? [How to pass data from a page to another page using react router](https://stackoverflow.com/questions/59701050/how-to-pass-data-from-a-page-to-another-page-using-react-router) – Drew Reese Nov 29 '22 at 17:57
  • Yes, thank you. Lots of options on there. Only they all seem to use the react-router-dom library but I'm using react-router-native. I'm hoping to understand why it's suddenly stopped working and how I can alter my code to make it work again. – jem4789 Nov 30 '22 at 00:07
  • 1
    It's all basically the same code. `react-router` is the base repo and the others are just re-exporting it and adding in what is different/unique to the environment, i.e. `react-router-dom` and `react-router-native` share a common core. – Drew Reese Nov 30 '22 at 00:31
  • Ah ok, I didn't know that, thank you for shedding some light on how they link. – jem4789 Nov 30 '22 at 12:10
  • Still working on this - my app uses class components so working with hooks is harder. It's a large app so I don't have time to restructure everything into functional components. If anybody knows a way in which to use react-router-native location.state with class components as we were able to before I'd appreciate advice! – jem4789 Dec 06 '22 at 12:04
  • 1
    Does my answer [here](/a/59701168/8690857) with regards to using `react-router@6` and class components, specifically the last section tagged "But I'm using a React class component" to create a custom `withRouter` HOC, help? – Drew Reese Dec 06 '22 at 22:16
  • I tried it but it won't export here: ........................................... "SyntaxError: "...\components\start.js: Unexpected token, expected "," (716:29) 714 | }); 715 | > 716 | export { HomePage, withRouter(SearchMethod), TimeAndType }; | ^ 717 | ........................................... Exports fine on another file with the export default syntax. – jem4789 Dec 08 '22 at 12:29
  • You are exporting *named* exports. Try either `const DecoratedSearchMethod = withRouter(SearchMethod);` and `export { HomePage, DecoratedSearchMethod as SearchMethod, TimeAndType };`, or maybe directly `export { HomePage, withRouter(SearchMethod) as SearchMethod, TimeAndType };`. – Drew Reese Dec 08 '22 at 17:25
  • The `` in my `App.js` won't accept `const DecoratedSearchMethod = withRouter(SearchMethod);` as its element prop. The error says `Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.` – jem4789 Dec 14 '22 at 17:27
  • (I kept `SearchMethod` in there as the element name. I exported the named element as `DecoratedSearchMethod as SearchMethod` in its file as you suggested. Maybe it doesn't like that it's not a function anymore? Won't work as `withRouter(SearchMethod) as SearchMethod`, just points to the first bracket and says that it expected a comma. – jem4789 Dec 14 '22 at 17:31
  • Think you could create a *running* [codesandbox](https://codesandbox.io/) demo of your code that reproduces this issue that we could inspect live? – Drew Reese Dec 14 '22 at 17:35
  • @DrewReese [link](https://codesandbox.io/s/async-hill-69esrg?file=/src/start.js). It won't actually compile anymore but here's my code. – jem4789 Dec 14 '22 at 18:07
  • 1
    Oh, I didn't realize this was an Expo project. You might have better luck providing a demo via an [Expo Snack](https://snack.expo.dev/). The renaming of the export appears to work with the first method I mentioned though. Here's a [fork](https://codesandbox.io/s/react-native-cant-pass-location-state-in-a-class-component-using-react-router-n-idkg9s?file=/src/start.js:29832-29961) of your sandbox, it *mostly* compiles but falls over when it hits the expo specific code. – Drew Reese Dec 14 '22 at 18:15
  • Yeah I still get this Error: `Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `App`.` Thanks anyway for taking the time to help. – jem4789 Dec 14 '22 at 18:20
  • (When I run it in my Emulator) – jem4789 Dec 14 '22 at 18:32
  • 1
    Just FYI I'm pointing out that *syntactically* the first method is correct, ***but*** if there is another issue in that file that prevents the file from compiling, then the components will fail to be exported. This might be what you are seeing. – Drew Reese Dec 14 '22 at 18:37
  • Absolutely, thanks for helping me to fix this specific syntax mistake. – jem4789 Dec 14 '22 at 18:40

0 Answers0