How can I make a transition to another page through Link?

Question

React

I can't go to another page, so that the page is not below the Auth component, but opens as it opens to the entire spherical and window height
My implementation

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Auth from "./Auth";
import Registration from "./Registration";

export default class Router extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Switch>
            <Route path="/login" component={Auth} />
            <Route path="/registration" component={Registration} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

ReactDOM.render(<Router />, document.getElementById("root"));

Here is an example https://codesandbox.io/s/03r78ljrj0

Answer 1

Why are you wrapping the link in a router? Fix:

<BrowserRouter>
  <Link to="/registration">Зарегестрироваться</Link>
</BrowserRouter>

On the:
<Link to="/registration">Зарегестрироваться</Link>