RN - <Link> doesn't update location.pathname

Version

react-router-native 4.1.1 React 15.4.1 React Native 0.42.3 Redux 3.5.2 React Redux 5.0.4

Test Case

class Content extends React.Component {
  componentDidMount() {
    this.props.history.listen((location, action) => {
      console.log(location, action);
      console.log(this.props.location); 
    });

    this.props.history.push('/foo');
  }

  render() {
    let Foo = <Text>{'Foo'}</Text>;
    let Bar = <Text>{'Bar'}</Text>;

    return (
      <View>
        <Link to="/foo"><Text>{'Foo'}</Text></Link>
        <Link to="/bar"><Text>{'Bar'}</Text></Link>

        <Switch>
          <Route path="/foo" component={Foo} />
          <Route path="/bar" component={Bar} />
        </Switch>
      </View>
    );
  }
}

export default withRouter(connect()(Content))


// ------------------------------------------------------

class App extends React.Component {
  // ... init store

  render() {
      <Provider store={this.store}>
        <NativeRouter>
          <Content/>
        </NativeRouter>
      </Provider>
  }
}

Steps to reproduce

Click a link or call this.props.history.push('/foo')

Expected Behavior

Replacement of this.props.location.pathname and an updated component

Actual Behavior

this.props.location.pathname is not updated, and the component is not rerendered either. this.props.history is updated as can be seen in this.props.history.listen. Setting this.props.location.pathname manually does result in the expected behavior.

[mjroeleveld]

I failed to get it working after hours of looking into my code, documentation and examples. Not expecting to get it to work I now work around this by doing this in Content’s componentWillMount():

this.props.history.listen(location => {
  if (location.pathname !== this.props.location.pathname) {
    this.props.location.pathname = location.pathname;
    this.forceUpdate();
  }
});

[danielkcz]

Well, isn’t that like a core functionality of the router to change routes? 😆 I just encountered the same problem. I tried debugging and it seems that NativeRouter is not even listening to any changes. There is a single listener in Router and strangely enough, its computeMatch method always sets pathname to /

https://github.com/ReactTraining/react-router/blob/c7993ce58ee1e4c1176b576a46bcc5561ac751ad/packages/react-router/modules/Router.js#L60

I am failing to understand how is this supposed to work since NativeRouter is just a MemoryRouter and there are no listeners whatsoever.

@timdorr Since you have closed this issue, do you have some idea what might be wrong here?

Edit: Well, it looks like it must be something strange on my side. I copied simple example to Snack Expo and it’s working there just fine… https://snack.expo.io/BJiha0g5z You might want to use your real phone instead of waiting in appetize queue