如何在点击时在 React 中重定向？

Question

在我的 react 应用程序中，我使用 useHistory 挂钩重定向到我的 Home 组件。为什么 useHistory 未定义，我将如何解决这个问题？

App.js

import 'bootstrap/dist/css/bootstrap.css' 
import React from "react";
import { Button } from 'react-bootstrap';
import { BrowserRouter, Route, useHistory} from 'react-router-dom';

import { Switch } from 'react-router-dom/cjs/react-router-dom.min';
import './App.css';
import Home from './components/Home/Home';



const App = () =>
{
  const history = useHistory()
  const handleClick = () => 
  {
    console.log(history)
    console.log("handle click")
    // history.push("/home") this line throws "cannot read property of undefined" error
  }

    return (
      <>
        <BrowserRouter>
          <Button onClick = {handleClick} variant = "primary">Get Started</Button>
  
          <Switch>
            <Route path="/home" exact component = {Home}/>
          </Switch>
        </BrowserRouter>
  
      </>
    );      
}

export default App;

Answer 1

尝试在此组件之外使用useHistory() 并查看它是否有效。看来您是在路由器本身之前调用该函数，并且两者都是从 react-router-dom 导入的。