При клике на ссылку не открывается нужный контент, хотя url меняется.

import './header.css';
import { NavLink } from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';
 
function Nav() {
    return (
<BrowserRouter>
        <div className="header">
            <ul className="header__list-nav">
                <li>
                    <NavLink exact to='/friends'>друзья</NavLink>
                </li>
                <li> <NavLink exact to="/message">сообщения</NavLink></li>
                <li>стена</li>
                <li>параметры</li>
            </ul>
        </div>
        </BrowserRouter>
    );
}
 
export default Nav;

import './main.css';
import logo from './../../logo.svg';
import Info from './navigation/info';
import Message from './navigation/message';
import Friends from './navigation/frieds';
import { BrowserRouter } from 'react-router-dom';
import { Route } from 'react-router-dom';
 
function Main() {
    return (
        <BrowserRouter>
            <div className="main">
                <div className="main__photo">
                    <img src={logo} alt="logo" />
                </div>
                <div>
                    <Route path='/friends' component={Friends}></Route>
                    <Route path='/info' component={Info}></Route>
                    <Route path='/message' component={Message}></Route>
                </div>
            </div>
        </BrowserRouter>
    );
}
 
export default Main;

<Switch>
   <Route path="/friends" component={Friends} />
   <Route path="/info" component={Info} />
   <Route path="/message" component={Message} />
</Switch>