(Transmit) React router not passing QueryParams to Transmit? about react-isomorphic-starterkit

[kevzettler]

@RickWong any thoughts or guidance on this?

Seems similar to RickWong/react-transmit#10

Which dosen't look like it was properly resolved

[RickWong]

Hi @kevzettler I would recommend writing a new ConnectHandler component that handles the route, captures the id, then renders <Connect queryParams={{id}} />. It functions as a bridge between React Router and the Transmit component.

Although it's one more component to write, it does separate routing from the Connect component. Doing it like this, enables you to re-use the Connect component somewhere else with another id.

[aksrikanth]

Hi @RickWong,

Maybe I'm missing something, but your workaround doesn't seem to work for me. Here is what I did

// Routes
<Route name="user" path="/user/:userId" handler={IdProxy} />

// in IdProxy
render() {
  return <User userId={this.props.params.userId} />
}

// in User (ES6 syntax)
class User extends React.Component {
  render() {
    const user = this.props.user;
    console.log('p: ', this.props);
    return <div/>;
  }
}

export default Transmit.createContainer(User, {
  queries: {
    user(queryParams) {
      console.log('qp: ', queryParams);
      return new Promise((resolve, reject) => {
        resolve(1);
      });
    }
  }
});

This still ends up with the props containing the userId but the queryParams being blank. If I need to load a user in the queries, I cannot without the userId.

[RickWong]

You should render the User like this: <User queryParams={{userId: this.props.params.userId}} />. See this DOCS section HOC PropTypes.

[aksrikanth]

Thanks for clarifying :)