React.js 更改页面

Question

我编写了一个登录面板，需要通过history.Push() 更改页面，但出现错误：

React Hook "useHistory" 不能在顶层调用。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用

    import react from 'react';
    import{landingPage, adminPage} from './components';
    import { Route,Router, Switch } from 'react-router-dom';
    import {useHistory} from 'react-router-dom';
    import {routes} from './components/routes'

    const history = useHistory();
    class App extends react.Component{
      handlepageChange = (activePage) => {
        history.push(activePage);
      }
      render(){
        const {landing, admin} = routes;
        return(
          <div className="App">
            <Router history ={history}>
              <Switch>
                <Route exact path = {landing.path}>
                  <landingPage handlepageChange = {this.handlepageChange}/>
                </Route>
                <Route exact path={admin.path}>
                  <adminPage handlepageChange ={this.handlepageChange}/>
                </Route>
              </Switch>
            </Router>
          </div>
        )
      }
    }
    
    export default App;

错误出现在

const history = useHistory();

和

<Router history = {history}>

登录后如何更改页面并修复错误

Answer 1

您可以在类组件中使用this.props.history.push(activePage) 导航到其他组件