react-router-dom rendering new page over current page

router-dom`

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";
import Squall from '../pages/squall/Squall';

interface UserProps {
    name: string
    avatar: string
}

class User extends Component<UserProps> {

    constructor(props: UserProps) {
        super(props);
      }

    render() {
        return (
            <Router>
                <Link to="/">
                    Home
                </Link>
                <Link to="/squall">
                    <img src={this.props.avatar} alt={this.props.name}/>
                </Link>

                <Switch>
                    <Route path="/squall">
                        <Squall/>
                    </Route>
                    <Route path="/">
                        
                    </Route>
                </Switch>
            </Router>
        )
    }
}

export default User;

why when I click on the element with <Link to="/squall">, it renders the Squall page over the current page rather than a new one. The "current page" is just <App/>. I looked online and the solution was to use the exact keyword but still no luck.