Import Link from react-router-dom

[billyjanitsch]

Hi again @mjackson!

This PR is in regards to the other suggestion in your reply remix-run/react-router#6608 (comment):

You can work around this in React Router by avoiding the places where we use history as a transitive dependency. For example, you could do something like:

// Import directly from history
import { createBrowserHistory } from 'history';
// Import Router directly instead of BrowserRouter
import { Router } from 'react-router-dom';

const history = createBrowserHistory();

<Router history={history}>
 // ...
</Router>

Using Router with a manually-created history object seems like a reasonable enough workaround to me, because it's non-intrusive and only needs to be done in one place. I see that you've tried this in the separate-imports branch, which this PR is against.

Unfortunately, the reason why your snippet works is because Router (the only import from react-router-dom) is actually a re-export from react-router, so Webpack prunes the entire react-router-dom.js file, and therefore doesn't mark any of the history imports as used. But if you import anything that isn't just a re-export, the bundler can't do this, and you once again end up with the entire contents of history (even if the thing you imported doesn't use history at all).

For example, in this PR, I do import {Link, Router} from 'react-router-dom', and we once again end up with createHashHistory in the output. So the workaround you're proposing means that you can't use e.g. Link or NavLink anywhere, which is a pretty severe limitation since they're such core parts of React Router's functionality.