reactjs - 为什么我的 useHistory 即使在路由器中也未定义？

问题描述

我正在尝试使用 react 组件中的 history.push ，但它会引发历史未定义的错误。

这个 index.js 文件：

ReactDOM.render(
  <React.Fragment>
    <Provider store={store}>
      <Router>
        <App />
      </Router>
    </Provider>
  </React.Fragment>,
  document.getElementById("root")
);

这是 App.js：

function App() {
  return (
        <AuthenticatedUser>
          <Routers></Routers>
        </AuthenticatedUser>
  );
}

Routers.js 文件包含交换机内的所有路由：

export default function Routers() {
  return (
    <Switch>
      <Route exact path="/" component={Books}></Route>
      <Route exact path="/login" component={LoginForm}></Route>
      <Route exact path="/librarians" component={Librarians}></Route>
      <Route exact path="/customers" component={Customers}></Route>
      <Route
        exact
        path="/all-borrowed-books"
        render={(props) => <BorrowedBooks {...props} all={true} />}
      ></Route>
      <Route exact path="/my-borrowed-books" component={BorrowedBooks}></Route>
      <Route
        exact
        path="/all-returned-books"
        render={(props) => <ReturnedBooks {...props} all={true} />}
      ></Route>
      <Route exact path="/my-returned-books" component={ReturnedBooks}></Route>
      <Route exact path="/register" component={SignUpForm}></Route>
    </Switch>
  );
}

还有我的 AuthenticatedUser.js 文件：

function AuthenticatedUser(props) {
  return (
    <>
      <SideMenu />
      <Header />  
      <div>{props.children}</div>
    </>
  );
}

export default AuthenticatedUser;

现在在我收到错误的 Header.js 文件中，我正在尝试在注销功能中使用 useHistory 钩子进行 history.push 。这是代码：

const Header = (props) => {
  const classes = useStyles();
  const { history } = useHistory();
  const logOut = () => {
    history.push('/login')
    // clearLocalStorage();
  };

  return (
    <AppBar position="static" className={classes.root}>
      <Toolbar>
        <Grid container alignItems="center">
          <Grid item>
            <InputBase
              placeholder="Seach topic"
              className={classes.searchInput}
              startAdornment={<SearchIcon fontSize="small" />}
            />
          </Grid>
          <Grid item sm></Grid>
          <Grid item>
            <ActionButton onClick={logOut}>
              <ExitToAppIcon></ExitToAppIcon>
            </ActionButton>
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>
  );
};

export default Header;

据我所知，由于我的 App 组件位于 BrowserRouter 中，因此应用程序中的所有组件都应该可以访问浏览器历史记录。但显然我错了。有人可以澄清一下。

标签： reactjsreact-hooksreact-router

reactjs - 为什么我的 useHistory 即使在路由器中也未定义？

问题描述

解决方案

推荐阅读