React Router: Location "/" Not Recognized?

Question

I've had React Router working fine for years. Now all of a sudden this morning it stopped working. I'm using React Router 5.

I created a tiny demo project to demonstrate the anomaly. Here's the router:

import React from 'react'
import {Route, Router, Switch} from 'react-router';
import {Link} from 'react-router-dom'
import History from 'history';

const browserHistory = History.createBrowserHistory();
console.log(browserHistory.location);

export function App() {
    return (
        <Router history={browserHistory}>
            <Switch>
                <Route path="/" render={(routeProps) =>
                    <Link to={"/"}>Home</Link>
                }/>
                <Route render={(routeProps) =>
                    <Link to={"/"}>It's the same location ("/"). Why did I go to a different route?</Link>
                 }/>
            </Switch>
        </Router>
    )
}

Clicking "Home", should re-display the home page... but it doesn't.

Here's a dropbox link to download the tiny demo app. Meteor is the build tool, so to run it:

• meteor npm install
• meteor run
• see the app at http://localhost:3000/

What am I missing?

Answer 1

Okay I fixed it.

Instead of:

import {Route, Router, Switch} from 'react-router';
import {Link} from 'react-router-dom'

...it has to be:

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

Now the question is, why did it ever work the first way? My app has had it like that for years and it worked fine up until yesterday morning.

If anyone can post the answer to that within a month or two, I will mark it as the accepted answer here.