Почему не отображается компонент при переходе по ссылке React router?

Question

noombasa @noombasa

React

Почему не отображается компонент при переходе по ссылке React router?

Использую material-ui, react-router и redux. Пробую сделать с помощью этого простой сайт с переходами. Проблема в том что при нажатии на ссылку в url прописывается маршрут, но не происходит изменение компонента по нужному роуту.
Вот код (к сожалению знаю что пока все не аккуратно, ужасно и не разбито, но пока пытаюсь сделать чтобы заработало):

import React from "react";
import PropTypes from "prop-types";
import { Link } from 'react-router-dom';
import { Switch, Route } from 'react-router-dom';

import classNames from "classnames";
import { withStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import MenuItem from "@material-ui/core/MenuItem";
import Typography from "@material-ui/core/Typography";
import Button from '@material-ui/core/Button';
import TextField from "@material-ui/core/TextField";
import Divider from "@material-ui/core/Divider";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";

import Content from "./Content.jsx"
import LinkBtn from './LinkBtn.jsx';

import Home from './Home.jsx';
import AuthorizationContainer from '../containers/AuthorizationContainer.jsx';


import "./index.scss";
import style from "./App.scss";

const drawerWidth = 240;

const styles = theme => ({
  drawerPaper: {
    position: "relative",
    width: drawerWidth
  },
  drawerHeader: {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
    padding: "0 8px",
    ...theme.mixins.toolbar
  },
  content: {
    flexGrow: 1,
    marginLeft: -drawerWidth,
    backgroundColor: theme.palette.background.default,
    padding: theme.spacing.unit * 3,
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    })
  },
  contentShift: {
    marginLeft: 0,
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen
    })
  }
});

class App extends React.Component {
	state = {
		open: false
	};

	handleDrawerOpen = () => {
		this.setState({ open: true });
	};

	handleDrawerClose = () => {
		this.setState({ open: false });
	};

	render() {
		const { classes, isAuth } = this.props;
		const { open } = this.state;
		const drawer = (
			<Drawer
				variant="persistent"
				open={open}
				classes={{
				paper: classes.drawerPaper
				}}
			>
				<div className={classes.drawerHeader}>
					<IconButton className="btnOutlineNone" onClick={this.handleDrawerClose}>
						<ChevronLeftIcon />
					</IconButton>
				</div>
				<Divider />
			</Drawer>
		);
		const login = (
			<Button className={ open 
				? "btnOutlineNone" 
				: "btnOutlineNone loginBtnShift"} 
				color="inherit"
				component={Link}
				to="/Authorization"
				raised="true"
			>
			Login
			</Button>
		)

		return (
			<div className={`${style.root}`}>
				<div className="appFrame">
					<AppBar
					className={open ? "appBarShift" : "appBar"}
					>
						<Toolbar disableGutters={!open}>
							<IconButton
								color="inherit"
								aria-label="open drawer"
								onClick={this.handleDrawerOpen}
								className={ open ? "menuBtn hide btnOutlineNone" : "menuBtn btnOutlineNone" }
							>
								<MenuIcon />
							</IconButton>
							<Typography variant="title" color="inherit" className="title" noWrap>
								FreeQuiz
							</Typography>
							{ !isAuth ? login : null }
						</Toolbar>
					</AppBar>
					{drawer}
					<div
						className={classNames(classes.content, {
							[classes.contentShift]: open
						})}
					>
						<div className={classes.drawerHeader} />
						<Switch>
							<Route exact path="/" component={Home} />
							<Route path="/Authorization" component={AuthorizationContainer} />
						</Switch>
					</div>
				</div>
			</div>
		);
	}
}

App.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired
};

export default withStyles(styles, { withTheme: true })(App);

При нажатии на кнопке логин должен выполниться переход.