Question

react-router更改链接，但页面不会更改。从URL访问地址时，它可以正常工作，但在单击按钮

时不起作用

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

我的路由器

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 反应：15.5.4 React-router-dom：4.1.1 浏览器：chrome（59.0.3071.115）

Answer 1

添加更改以下代码以使用react -outer-dom添加withRouter并更改导出默认值以解决此问题

import { Link, NavLink, withRouter } from 'react-router-dom';

export default withRouter(
  connect((state)=>{
    return { drawerOpen: state.mainContainerDrawerOpen }
  })(ZWrapperDrawer)
);

链接更改但页面没有

1 个答案: