Не обновляется страница при переходе на Route

Не обновляется страница при переходе по Route

Мой код:

import React from "react";
import Contact from "./Contact/Contact";
import Header from "./Header/Header";
import Content from "./Content/Content";
import Skills from "./Skills/Skills";
import Works from "./Works/Works";
import { BrowserRouter, Route, Link } from "react-router-dom"
import { Switch } from "react-router";

export default function Main() {
    return (
        <div>
            <Header />
            <BrowserRouter>
            <Switch>
                <Route exact path="/" component={Content} key="reload" />
                <Route exact  path="/skills" component={Skills} key="reload" />
                <Route exact  path="/works" component={Works} key="reload" />
                <Route exact  path="/contact" component={Contact} key="reload" />
            </Switch>
            </BrowserRouter>
        </div>
    );
}

Один из моих компонентов (Меню) которым я задаю Link

import "../../Styles/Index.scss";
import { BrowserRouter as Router, Switch, Route, Link,NavLink } from "react-router-dom";

export default function Header() {
    return (
        <Router>
            <div className="header_containeer">
                <div className="block block-row">
                    <div class="menu-button">
                        <button>
                            <NavLink to="/works">
                                Works
                            </NavLink>
                        </button>
                    </div>
                    <div class="menu-button">
                        <button>
                            <NavLink to="/skills">
                                <a href="#">Skills</a>
                            </NavLink>
                        </button>
                    </div>
                </div>
                <div className="block block-logo">
                    <NavLink to="/">
                            <span>Vadim</span> Chorrny
                    </NavLink>
                </div>
                <div className="block block-contact">
                    <div className="menu-button" id="menu-contact">
                        <div class="underline underline-head"></div>
                        <button>
                            <NavLink to="/contact">
                                Contact
                            </NavLink>
                        </button>
                        <div class="underline underline-down"></div>
                    </div>
                </div>
            </div>
        </Router>
    );
}

Суть проблемы: когда я перехожу по ссылкам
у меня не перезагружается страница и не отображается контент, (он отображается только когда вручную перезагружаю страницу)

Надеюсь на ваш совет, так как сам не могу решить проблему...