React Router not rendering correctly - reactjs

Question

I had this working before, but I've made some changes in my app structure which has broken the routes. If I manually go to the route in the browser it works (the correct content loads). The href attribute is not rendering in the html.
I have a warning message in my console:
Warning: Failed prop type: Invalid prop to supplied to Link.
I don't nderstand why it's invalid.
What can I do to improve the code and fix the problem?
Index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './Header';
import Routes from './Routes';
import '../less/imports.less';
const App = () => (
<div>
<Header />
<main>
<Routes />
</main>
</div>
);
if (typeof window !== 'undefined') {
ReactDOM.render(
(
<App />
), document.getElementById('app'),
);
}
Routes.jsx:
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Dashboard from './Dashboard';
import About from './About';
import Blog from './Blog';
class Routes extends React.Component {
constructor(props) {
super(props);
this.state = {
active: 'active',
};
}
render() {
return (
<Router>
<div>
<nav>
<ul className="block-group">
<li className={this.state.active}><Link to={Dashboard}>Dashboard</Link></li>
<li><Link to={About}>About</Link></li>
<li><Link to={Blog}>Blog</Link></li>
</ul>
</nav>
<Route exact path="/" component={Dashboard} />
<Route path="/about" component={About} />
<Route path="/blog" component={Blog} />
</div>
</Router>
);
}
}
export default Routes;

Answer 1

I have just fixed this by changing the to href to the actual route strings. Not sure how it worked before.
<li className={this.state.active}><Link to="/">Dashboard</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/blog">Blog</Link></li>