如何使用带有组件的 React Router 作为默认页面

Question

我正在构建一个将登录页面作为默认显示页面的 Web 应用程序。当用户成功登录后，我想将用户路由到另一个功能组件 dashboard()。

我的 app.js 看起来像这样

function App() {
  return (
    <ThemeProvider theme={THEME}>
      <FirebaseContext.Consumer>
        {firebase => <SignIn firebase={firebase}/>}
      </FirebaseContext.Consumer>
    </ThemeProvider>
  );
}

export default App;

SignIn 是包含登录表单的组件，以及对用户进行身份验证的操作。

export default function SignIn(props) {
   function signInUser(){
      \\Signs in a user, and redirects to Dashboard() component
   }
   return(...)
}

如何从 signInUser 内部重定向用户 函数，到另一个组件dashboard()？

Answer 1

从文档中，您可以使用 useHistory 钩子。

import { useHistory } from "react-router-dom";

let history = useHistory();
export default function SignIn(props) {
     function signInUser(){
        // logic here
        history.push("/dashboard") // which is your route to the Dashboard com
     }
     return(...)
}