0

我正在尝试创建一个侧边栏组件来构建我的菜单，但是当我单击一个菜单项并尝试使用 react-router-dom push 重定向到该路由时，我收到了错误Cannot read property 'push' of undefined。

我在这里想念什么？

应用程序.tsx

import './App.css';
import Router from './Router'

function App() {
  return (
    <Router  />
  );
}

export default App;

路由器.tsx

import {
  Switch, Route
} from 'react-router-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router/immutable';
import configureStore, { history } from './store';
import { routes } from './shared/constants';
import Login from './features/auth/views/Login';
import PatientPage from 'features/patient/views/PatientPage';
import PatientForm from 'features/patient/views/PatientForm';
import Sidebar from 'shared/components/Sidebar';

const store = configureStore();

const Router = () => (
  <Provider store={store}>
    <ConnectedRouter history={history}></ConnectedRouter>
    <Sidebar>
      <Switch>
        <Route exact path={routes.home.path} component={Login} />
        <Route exact path={routes.patients.path} component={PatientPage} />
        <Route exact path={routes.newPatients.path} component={PatientForm} />
      </Switch>
    </Sidebar>
  </Provider>
);

export default Router;

侧边栏.tsx

import React from 'react';
import PropTypes from 'prop-types';
import { useHistory } from 'react-router-dom';
import {
  makeStyles,
  Drawer,
  CssBaseline,
  AppBar,
  Toolbar,
  List,
  Typography,
  Divider,
  ListItem,
  ListItemIcon,
  ListItemText
} from '@material-ui/core';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import { routes } from 'shared/constants';

const drawerWidth = 240;

const useStyles = makeStyles((theme) => ({
  // ....
}));

const Sidebar: React.FC<Props> = props => {

  const classes = useStyles();
  const history = useHistory();

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="fixed" className={classes.appBar}>
        <Toolbar>
          <Typography variant="h6" noWrap className={classes.logo}>
            App
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        <Toolbar />
        <div className={classes.drawerContainer}>
          <List>
            <ListItem button key="patients" onClick={() => history.push(routes.patients.path)}>
              <ListItemIcon><InboxIcon /></ListItemIcon>
              <ListItemText primary="Pacientes" />
            </ListItem>
          </List>
        </div>
      </Drawer>
      <main className={classes.content}>
        <Toolbar />
        
      </main>
    </div>
  )
}

interface Props { }

export default Sidebar;
4

1 回答 1

0

您需要用 BrowserRouter 包装 App.js

import './App.css';
import Router from './Router'
import {BrowserRouter} from "react-router-dom"

function App() {
  return (
<BrowserRouter>
    <Router  />
</BrowserRouter>
  );
}

export default App;
于 2021-04-21T12:50:42.677 回答