import React from 'react'; import ReactDOM from 'react-dom'; import 'typeface-roboto'; import { Theme, withStyles, MuiThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; import Tabs from '@material-ui/core/Tabs'; import Tab, { TabProps } from '@material-ui/core/Tab'; import { LinkProps } from '@material-ui/core/Link'; import Grid from '@material-ui/core/Grid'; import { HashRouter as Router, RouteComponentProps, withRouter, Route, Link, Redirect, Switch } from "react-router-dom"; import { TransitionGroup, CSSTransition } from "react-transition-group"; import { theme } from './theme'; import Snow from './Snow'; import About from './About'; const styles = (theme: Theme) => ({ root: { display: 'flex', height: '100vh', }, appBar: { zIndex: theme.zIndex.drawer + 1, transition: theme.transitions.create(['width', 'margin'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), }, title: { flexGrow: 1, display: 'inline-block' }, appBarSpacer: theme.mixins.toolbar, contentWrapper: { position: 'relative' as 'relative', flexGrow: 1, padding: theme.spacing.unit * 3, overflow: 'auto', }, content: { position: 'absolute' as 'absolute', left: theme.spacing.unit * 3, right: theme.spacing.unit * 3, paddingBottom: theme.spacing.unit * 3, }, indicator: { backgroundColor: theme.palette.primary.contrastText }, fadeEnter: { opacity: 0.001 }, fadeEnterActive: { opacity: 1, transition: 'opacity 300ms ease-in' }, fadeExit: { opacity: 1 }, fadeExitActive: { opacity: 0.001, transition: 'opacity 300ms ease-in' } }); interface MainTabsProps extends RouteComponentProps { classes: { root: string, appBar: string, appBarSpacer: string, toolbar: string, title: string, indicator: string, content: string, contentWrapper: string, fadeEnter: string, fadeEnterActive: string, fadeExit: string, fadeExitActive: string, } } class MainTabs extends React.Component { handleChangeTab = (event: React.SyntheticEvent<{}>, currentTab: any) => { this.props.history.push(currentTab); } render() { const { classes, location } = this.props; return (
Snow
{console.log(location)} }/>
); } } class Main extends React.Component { render() { let Tabs = withRouter(withStyles(styles)(MainTabs)); return ( ); } } ReactDOM.render(
, document.getElementById('root'));