React Routerの【Link to】でページ遷移を実現したい

Question

初めて質問させていただきます。
表現が不足する部分もあるかもしれませんがご了承ください。

前提・実現したいこと

Rails6の環境でReactを導入中で、ページ遷移を実現したいです。
現在では、ブラウザの入力欄に「http://localhost:3001/admin/login」
とアクセスすると

このようになり、
同じくブラウザの入力欄に「http://localhost:3001/admin/top」
とアクセスすると

このようになります。

また、ブラウザの入力欄に「http://localhost:3001/admin/login」
とアクセスし、「管理画面の一覧ページへ」リンクを押すと、

このようになります。
なので、「管理画面の一覧ページへ」リンクを押した際に

このようになってほしいです。

該当のソースコード

以下、各種ファイルおよびディレクトリ構成を記載します。

（ディレクトリ構成）

「app.js」

//export default App;
import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import Header from './top/header';
import MainLogin from './top/main_login';
import Index from './top/index';
import Footer from './top/footer';

export default class App extends Component {

  render() {
    return (
      <div>
        <Router>
          <Switch>
            <Route path="/admin/login">
              <Header/>
              <MainLogin/>
              <Index/>
              <Footer/>
            </Route>
            <Route exact path='/admin/top'>
              <Index/>
            </Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

「header.js」

import React, { Component } from 'react';

export default class Header extends Component {
  render() {
    return (
      <nav style={{ background: "#666" }}>
        <ul style={{ display: 'flex', listStyle: 'none' }}>
          <li style={{ margin: 10 }}><a href="/" style={{ color: "#fff", textDecoration: 'none' }}>管理画面ログイン画面</a></li>
        </ul>
      </nav>
    );
  }
}

「main_login.js」

//export default App;
import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

export default class MainLogin extends Component {
  render() {
    return (
      <div>
        <h1>Top#login</h1>
        <p>Find me in app/views/admin/login.html.erb</p>
      </div>
    );
  }
}

「index.js」

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Top from './top';

export default class Index extends Component {
  render() {
    return (
      <div>
        <Router>
          <Link to={`/admin/top`}>管理画面の一覧ページへ</Link>
          <Switch>
            <Route path="/admin/top" component={Top}/>
          </Switch>
        </Router>
      </div>
    );
  }
}

「footer.js」

import React, { Component } from 'react';

export default class Footer extends Component {
  render() {
    return (
      <div>
        {/*フッター*/}
        <footer style={{ height: 12, background: "#666", color: "#fff", padding: 12 }}>フッター</footer>
      </div>
    );
  }
}

各種jsファイルに関しまして、修正方法を教えていただけると幸いです。
よろしくお願いいたします

Answer 1

<Router>の中に<Router>を作っていたことが原因でした。
なので、「index.js」の<Router>を削除することで対応できました。
見ていた方々には申し訳ないですが、ありがとうございました。