react-router v4 alpha7 +dom6 not pushing context through BrowserRouter - react-router

Question

With react-router v4 alpha7 and dom alpha6 (latest versions) i get the following error:
Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.
in Link (created by MainComponent)
in p (created by MainComponent)
in div (created by MainComponent)
in MainComponent (created by Route)
in Route
in div
in Router (created by BrowserRouter)
in BrowserRouter
in ApolloProvider
I have seen similar questions like this, but i followed their advice.
BrowserRouter is a top level component around router components
import React from 'react'
import ReactDOM from 'react-dom'
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import MainComponent from './components/main.jsx';
import AboutComponent from './components/about.jsx';
import { BrowserRouter, Route, Link } from 'react-router-dom'
const client = new ApolloClient({
networkInterface: createNetworkInterface({ uri: 'http://app.local:8001/graphql' }),
});
ReactDOM.render(
<ApolloProvider client={client}>
<BrowserRouter>
<div>
<Route exactly path="/" component={MainComponent} />
<Route path="/about" component={AboutComponent} />
</div>
</BrowserRouter>
</ApolloProvider>,
document.getElementById('tourapp')
)
Then there is the main.jsx:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class MainComponent extends Component {
render() {
return <div>
<h1>Hello World</h1>
<p><Link to="/about">About</Link></p>
</div>;
}
}
export default MainComponent
Does anyone have an idea why the router context is not passed? This is almost straightfoward from the docs.

Answer 1

Do this, the link has to be inside the Router tag
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="#">WebSiteName</a>
</div>
<ul className="nav navbar-nav">
<li className="active"><Link to="/">Home</Link></li>
<li><Link to='/about'>About</Link></li>
</ul>
</div>
</nav>
<Switch>
<Route exact path="/" component={Weather}/>
<Route path="/about" component={About}/>
</Switch>
</div>
</Router>