Double-rendering

Please run the following case:

import React from 'react';
import { createMemoryHistory } from 'history';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { Button, Text, View } from 'react-native';
import { Route, Switch, Router } from 'react-router-native';
import { connectRouter, ConnectedRouter } from 'connected-react-router';

const normalHistory = createMemoryHistory();
const reduxHistory = createMemoryHistory();
const rootReducer = combineReducers({
  router: connectRouter(reduxHistory),
});
const store = createStore(rootReducer, undefined);

function TestCase({ name, history }) {
  return (
    <Switch>
      <Route
        path="/"
        exact
        render={() => {
          console.log('render foo', { name });
          return <Button title="foo" onPress={() => history.push('bar')} />;
        }}
      />
      <Route
        path="/bar"
        render={() => {
          console.log('render bar', { name });
          const handlePress = () => {
            setTimeout(() => {
              history.push('/baz');
            }, 1000);
          };
          return <Button title="bar" onPress={handlePress} />;
        }}
      />
      <Route
        path="/baz"
        render={() => {
          console.log('render baz', { name });
          return <Text>baz</Text>;
        }}
      />
    </Switch>
  );
}

export default function Entrypoint() {
  return (
    <React.Fragment>
      <View style={{ padding: 20 }}>
        <Router history={normalHistory}>
          <TestCase name="normal" history={normalHistory} />
        </Router>
      </View>
      <View style={{ padding: 20 }}>
        <Provider store={store}>
          <ConnectedRouter history={reduxHistory}>
            <TestCase name="connected" history={reduxHistory} />
          </ConnectedRouter>
        </Provider>
      </View>
    </React.Fragment>
  );
}

Click on foo -> bar -> baz in both of the routers:

• “normal” router will output: render baz only once;
• “connected” router will output render baz twice.

Why?

    "connected-react-router": "5.0.1",
    "react-router-native": "^4.3.0",

[AlexReff]

Getting this on 6.6.1.

Edit: found the culprit: I had wrapped everything in React.StrictMode which apparently causes double rendering.

[gregnb]

I found that changing any routes from using component prop to render prop did the trick:

Works

        <Switch>
          <Route path={'login'} render={props => <LoginContainer {...props} />} />
        </Switch>

Renders 2x

        <Switch>
          <Route path={'login'} component={props => <LoginContainer {...props} />} />
        </Switch>