Why is the component not rendered when the link is clicked React router?

Question

React

I use material-ui, react-router and redux. I'm trying to make a simple site with transitions using this. The problem is that when you click on a link, a route is written in the url, but the component does not change according to the desired route.
Here is the code (unfortunately I know that so far everything is not neat, terrible and not broken, but for now I'm trying to make it work):

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);

When you click on the login button, a transition should be performed.

Answer 1

documentation
withRouter(withStyles(...