How to create independent pages via react router?

I came from Angular framework to React and I got confused with router library. I'm trying to create Login page as a separate page in my app which is should contain Navigation and Footer which is part of Main.

I added this code to solve it but run into trouble.

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route} from 'react-router-dom';

import './index.css';

import App from './App';
import Login from './containers/Login';

ReactDOM.render(
  <BrowserRouter>
    <Route path="/">
      <App />
    </Route>

    <Route path="/login">
      <Login />
    </Route>
  </BrowserRouter>
, document.getElementById('root'));

//app.js
class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Navbar />

          <Switch>
            <Route path="/">
              <Redirect to="/dashboard" />
            </Route>

            <Route path="/dashboard">
              <Dashboard />
            </Route>

            <Route path="/admin">
              <Admin />
            </Route>
          </Switch>

          <Footer />
        </div>
      </Router>
    );
  }
}

I'm using react-router-dom library.

So the main idea is I desire to load /login page without Navbar and Footer but for other pages in my app like Admin, Dashboard I want them to load with Navbar and Footer (I don't want use conditional rendering here).

But now when I go to /login page I see Navbar and Footer, also I can't go to dashboard.