Не рендерятся stateless компоненты

import React from 'react';
import { NavLink } from 'react-router-dom';
 
export const Nav = () => {
  return (
    <ul className='nav'>
      <li>
        <NavLink to='/' exact activeClassName='active' >Home</NavLink>
      </li>
      <li>
        <NavLink to='/battle'>Battle</NavLink>
      </li>
      <li>
        <NavLink to='/popular'>Popular</NavLink>
      </li>
    </ul>
  )
}

import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Nav from "./Nav";
import Home from './Home';
import Battle from './Battle';
import Popular from './Popular';
 
 
export default class App extends Component {
  render () {
    return (
      <Router>
        <div className='container'>
          <Nav />
          <Switch>
              <Route exact path='/' component={Home} />
              <Route exact path='/battle' component={Battle} />
              <Route exact path='/popular' component={Popular} />
              <Route render={ () => <p>Page not found</p> } />
          </Switch>
        </div>
      </Router>
    )
  }
}

import React from 'react';
import { NavLink } from 'react-router-dom';
 
const links = ['Home', 'Battle', 'Popular'];
 
export default class Nav extends React.Component {
  render () {
    return (
      <ul className='nav'>
        {links.map(link => (
          <li>
          <NavLink
          to={link === 'Home' ? '/' : '/' + link.toLowerCase()}
          exact
          activeClassName='active' >{link}</NavLink>
        </li>
        ))}
    </ul>
    )
  }
}

import { NavLink } from 'react-router-dom';

import Nav from "./Nav";

import { NavLink } from 'react-router-dom';

import Nav from "./Nav";

import {Nav} from "./Nav";