React-router: Miss doesn't work within React Native

[steida]

Version

4.0.0

Test Case

Just basic example.

Steps to reproduce

Use in React Native

Expected Behavior

It should render something.

Actual Behavior

render it's not called.

<Miss render={({ location }) => {
  console.log(location);
  return null;
}}/>

[timdorr]

Can you give a more complete example? That snippet isn't enough to go on.

[steida]

I know. I will release universal routing based on React Router 4 in https://github.com/este/este soon. Then I will link code examples.

[ryanflorence]

Awesome, thanks. This seems weird since we're just waiting for componentDidMount

[steida]

I think I got it. It's race condition resulting from the different browser and native (MemoryHistory) implementation. This is my naive ControlledRouter implementation for React Native. Note setImmediate. I am using almost the same pattern in the browser, and it works. I am using setImmediate otherwise router flashes authorized pages. It works well in the browser but in the React Native, it somehow disables Miss component. setTimeout 0 helps. Also, note we have to use key prop hack to enforce rendering (which is a different story).

const Router = ({ appLocation, dispatch, pathname }: RouterProps) => (
  <MemoryHistory {...getMemoryHistoryInitialState(appLocation)}>
    {({ history, action, location }) => {
      if (location.pathname !== pathname) {
        setImmediate(() => {
          dispatch(setLocation(location));
        });
      }
      return (
        <StaticRouter
          action={action}
          canGo={history.canGo}
          key={pathname} // github.com/yahoo/react-intl/issues/234#issuecomment-163366518
          location={location}
          onPush={history.push}
          onReplace={history.replace}
        >
          <App />
        </StaticRouter>
      );
    }}
  </MemoryHistory>
);

I feel correctly implemented ControlledRouter should solves this both for the browser and React Native.

@timdorr Please do not close this issue. I described the problem and description is not the solution (unfortunately). Thank you.

[ryanflorence]

Cool, can you verify without redux if Miss works on native?
On Mon, Sep 19, 2016 at 3:14 PM Daniel Steigerwald [email protected]
wrote:

I think I got it. It's race condition resulting from the different browser
and native (MemoryHistory) implementation. This is my naive
ControlledRouter implementation for React Native. Note setImmediate. I am
using almost the same pattern in the browser, and it works. I am using
setImmediate otherwise router flashes authorized pages. It works in the
browser well. But in the React Native it somehow disables Miss component.
setTimeout 0 helps. Also note we have to use key prop hack to enforce
rendering.

const Router = ({ appLocation, dispatch, pathname }: RouterProps) => (
{({ history, action, location }) => { if (location.pathname !== pathname) { setImmediate(() => { dispatch(setLocation(location)); }); } return ( ); }}

);

I feel correctly implemented ControlledRouter should solves this both for
browser and the React Native.

@timdorr https://github.com/timdorr Please do not close this issue. I
described the problem and description is not the solution (unfortunately).
Thank you.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/ReactTraining/react-router/issues/3905#issuecomment-248144164,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGHaGKBs4_wHx8Duc-NaP4cf9iEoDzeks5qrwlVgaJpZM4KAB-V
.

[steida]

Yes, this works. https://gist.github.com/steida/1146630f2b0ced089e52475e7d3a9d26
So as I suspected, there is something wrong with my ControlledRouter implementation. Can you point me to the right direction at least, please?

[steida]

This is confusing I think. Why location pathname isn't the same?

<Match
  pattern="/"
  render={renderProps => {
    console.log(renderProps);
    return null;
  }}
/>

[ryanflorence]

it's only the amount matched so you can do relative links and nested
matches. you also get location
On Mon, Sep 19, 2016 at 4:19 PM Daniel Steigerwald [email protected]
wrote:

This is confusing I think. Why location pathname isn't the same?

pattern="/"
render={renderProps => { console.log(renderProps); return null; }}
/>

[image: screen shot 2016-09-20 at 01 18 27]
https://cloud.githubusercontent.com/assets/66249/18652140/391a1c04-7ed0-11e6-9709-ef2f1a377a43.png

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/ReactTraining/react-router/issues/3905#issuecomment-248157231,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGHaMGz664UjR0ryZ_m1kd7e0rTwHkUks5qrxiWgaJpZM4KAB-V
.

[steida]

So this is my workaround now (redirect on Miss)

<Match
  pattern="/"
  render={({ location: { pathname } }) => {
    const urls = ['/', '/intl', '/offline', '/signin', '/todos', '/me'];
    if (urls.indexOf(pathname) !== -1) return null;
    return (
      <Redirect to="/" />
    );
  }}
/>

I don't know what's wrong with Miss and Redux combination. Maybe unfamous key issue?

[ryanflorence]

look at the router children render callback, take that location and pass it
to your matches and misses and it will work until I can publish controlled
router
On Mon, Sep 19, 2016 at 4:24 PM Daniel Steigerwald [email protected]
wrote:

So this is my workaround now.

pattern="/"
render={({ location: { pathname } }) => { const urls = ['/', '/intl', '/offline', '/signin', '/todos', '/me']; if (urls.indexOf(pathname) !== -1) return null; return ( ); }}
/>

I don't know what's wrong with Miss and Redux combination. Maybe unfamous
key issue?

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/ReactTraining/react-router/issues/3905#issuecomment-248157970,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGHaJpJq2ia40hAIgtmHbo7weZmI3WJks5qrxmTgaJpZM4KAB-V
.

[steida]

No luck.

[ryanflorence]

our new subscription based context should work out in -alpha.4, not sure when I'll publish this, so here's the gist to my controlled router https://gist.github.com/a9019d1a9be6b0e9217f41c8280bfa26