title: React: how to change page when using react-navigation and react-router?
body: <p>I am building a <code>react-native</code> application with Expo SDK 36.</p>
  
  <p>This allows me to create an application for native environments such as iOS and Android, but with <code>react-native-web</code>, to also make it work on the Web.</p>
  
  <p>Due to the fact that <a href="https://reactnavigation.org/docs/" rel="nofollow noreferrer">react-navigation</a> is not supporting browser history (window location change when navigating), I got recommended to only use the official expo routing library (react-navigation) with the native app, and use <a href="https://reacttraining.com/react-router" rel="nofollow noreferrer">react-router</a> for the web.</p>
  
  <p>Since I have two library in my project, I can use the <code>myRouter.web.js</code> that will export a router made with <code>react-router</code>, and <code>myRouter.js</code> that will export the navigation made with react-navigation.</p>
  
  <p>This is how to use <code>react-navigation</code> to create a link between to pages:</p>
  
  <pre><code>&lt;Button
    title="Go to Details"
    onPress={() =&gt; this.props.navigation.navigate('Details')}
  /&gt;
  </code></pre>
  
  <p>This is how to use <code>react-router</code> to create a link between to pages:</p>
  
  <pre><code>import { Link } from 'react-router-web';
  
  export default () =&gt; &lt;Link to={'/details'}&gt;Go to Details&lt;/Link&gt;;
  </code></pre>
  
  <p>With these two syntax, how can I use the two to create links within my app, without using those two syntax everywhere in my source code?</p>
  
  <p>I was thinking of creating a <code>Link.js</code> and <code>Link.web.js</code>, but not sure how I should implement it?</p>
  
  <p>As an example, <code>Link.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>import * as React from 'react';
  import { Button } from 'react-native';
  import { useNavigation } from 'react-navigation-hooks';
  
  export default function Link({ to, screenName, children, ...rest }) {
    const navigation = useNavigation();
    return (
      &lt;Button
        title={children}
        onPress={() =&gt; navigation.navigate(screenName)}
        {...rest}
      /&gt;
    );
  }
  </code></pre>
  
  <p>And <code>Link.web.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>import  React from 'react';
  import { Link as RRLink } from 'react-router-dom';
  
  export default function Link({ to, screenName, children, ...rest }) {
    return (
      &lt;RRLink
        title={children}
        to={to}
        {...rest}
      &gt;
        {children}
      &lt;/RRLink&gt;
    );
  }
  </code></pre>
  
  <p>This will force me to use <code>screenView</code> and <code>to</code> when creating <code>&lt;Link /&gt;</code>. This because react-navigation does not have path, it just use a name. </p>
  
  <p>Is there anything wrong I am missing? </p>