link changes but page does not - reactjs

Question

react-router changes the link but the page does not change. When go to the address from URL it works but doesn't work when clicking button
ZWrapper.jsx
import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import ZWrapperAppBar from 'app/components/Wrapper/ZWrapperAppBar';
import ZWrapperDrawer from 'app/components/Wrapper/ZWrapperDrawer';
const styleSheet = createStyleSheet('Main', {
root: {
width: '100%',
flexGrow: 1,
align: 'center',
direction: 'row'
},
flex: {
align: 'center',
direction: 'row',
justify: 'flex-end',
},
mainDrawer:{
position: 'relative',
width: 500
},
mainDrawerContent:{
height: '100%'
},
mainDrawerBottomNav:{
position: 'absolute',
bottom: 0
},
typeContainer:{
margin: 0
}
});
export class ZWrapper extends React.Component{
PropTypes = {
classes: PropTypes.object.isRequired,
};
render(){
return(
<div className={styleSheet.root}>
<ZWrapperAppBar classes={styleSheet} />
<ZWrapperDrawer classes={styleSheet} />
{this.props.children}
</div>
)
}
}
// export default withStyles(styleSheet)(ZWrapper);
export default connect((state)=>{
return { drawerOpen: state.mainContainerDrawerOpen }
})(ZWrapper);
ZWrapperAppBar.jsx
import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import { AppBar, Toolbar, Typography, IconButton, Grid, Button } from 'material-ui';
import { lightGreen, green } from 'material-ui/colors';
import MenuIcon from 'material-ui-icons/Menu';
import LinkButton from 'app/components/material-ui-addons/LinkButton';
import {toggleOpenDrawer} from 'actions';
export class ZWrapperAppBar extends React.Component{
PropTypes = {
classes: PropTypes.object.isRequired,
};
render(){
var {dispatch, drawerOpen, classes} = this.props;
return(
<AppBar position="absolute" >
<Toolbar style={{backgroundColor: green.A400}} className={classes.mainAppBar}>
<IconButton color="contrast" aria-label="Menu" onClick={()=>{dispatch(toggleOpenDrawer())}}>
<MenuIcon />
</IconButton>
<Typography color="inherit" type="title">
Recipea
</Typography>
<Grid container className={classes.flex} align="center" direction="row" justify="flex-end" gutter={Number("8")}>
<Button component={Link} color="contrast" to="/Account/Login" >{'Get Started'}</Button>
</Grid>
</Toolbar>
</AppBar>
)
}
}
export default connect((state)=>{
return { drawerOpen: state.mainContainerDrawerOpen }
})(ZWrapperAppBar);
ZWrapperDrawer
import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import { AppBar, Toolbar, Typography, Button, IconButton, Grid, Drawer, Divider } from 'material-ui';
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import BottomNavigation, { BottomNavigationButton } from 'material-ui/BottomNavigation';
import { lightGreen, green, grey } from 'material-ui/colors';
import CloseIcon from 'material-ui-icons/Close';
import SettingsIcon from 'material-ui-icons/Settings';
import FavoriteIcon from 'material-ui-icons/Favorite';
import LocationOnIcon from 'material-ui-icons/LocationOn';
import ListItemWithLink from 'app/components/material-ui-addons/ListItemWithLink';
import {toggleOpenDrawer} from 'actions';
export class ZWrapperDrawer extends React.Component{
PropTypes = {
classes: PropTypes.object.isRequired,
};
render(){
var {dispatch, drawerOpen, classes} = this.props;
return(
<Drawer docked={false} open={drawerOpen} onRequestClose={()=>{dispatch(toggleOpenDrawer())}} className={classes.mainDrawer}>
<AppBar position="static" className={classes.mainAppBar}>
<Toolbar style={{backgroundColor: green.A400}}>
<Link to="/">
<Button>
<Typography type="title" style={{color: grey[50]}}>Recipea</Typography>
</Button>
</Link>
<Grid container className={classes.flex} align="center" direction="row" justify="flex-end" gutter={Number("8")}>
<IconButton color="contrast" aria-label="Menu" onClick={()=>{dispatch(toggleOpenDrawer())}}>
<CloseIcon />
</IconButton>
</Grid>
</Toolbar>
</AppBar>
<ListItem button>
<ListItemText primary="About" />
</ListItem>
<ListItemWithLink to="/About/Us" label="Us" />
<ListItemWithLink to="/About/OurHelper" label="Used Dependencies"/>
<BottomNavigation className={classes.mainDrawerBottomNav} showLabels>
<BottomNavigationButton label="Settings" icon={<SettingsIcon />} />
<BottomNavigationButton label="Favorites" icon={<FavoriteIcon />} />
<BottomNavigationButton label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>
</Drawer>
)
}
}
export default connect((state)=>{
return {
drawerOpen: state.mainContainerDrawerOpen
}
})(ZWrapperDrawer);
My Router
import React from 'react';
import {BrowserRouter as Router, Switch, Route, Redirect} from 'react-router-dom';
import MainPage from 'MainPage';
import ZWrapper from 'ZWrapper';
import AccountSignUp from 'AccountSignUp';
export default(
<Router>
<ZWrapper>
<Switch>
<Route exact path='/' component={MainPage}/>
<Route exact path='/Account/SignUp' component={AccountSignUp}/>
</Switch>
</ZWrapper>
</Router>
)
app.jsx
//Modules
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
// import 'typeface-roboto';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import injectTapEventPlugin from 'react-tap-event-plugin';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
import Router from 'app/router/';
import {configure} from 'configureStore';
var store = configure();
//App CSS
require('applicationStyles');
//App JS
require('myJS/all.jsx');
// override material-ui theme
const theme = createMuiTheme({
overrides:{
MuiGrid:{
'gutter-xs-8':{
margin: '0 -8px'
},
'gutter-xs-16':{
margin: '0 -8px'
},
'gutter-xs-24':{
margin: '0 -8px'
},
'gutter-xs-40':{
margin: '0 -8px'
},
},
},
})
//render
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider theme={theme}>
{Router}
</MuiThemeProvider>
</Provider>,
document.getElementById('app')
);
Material-UI: v1-alpha
React: 15.5.4
React-router-dom: 4.1.1
Browser: chrome (59.0.3071.115)

Answer 1

Add change the folowing code to add withRouter to from react-router-dom and change the export default to solve this issue
import { Link, NavLink, withRouter } from 'react-router-dom';
export default withRouter(
connect((state)=>{
return { drawerOpen: state.mainContainerDrawerOpen }
})(ZWrapperDrawer)
);