反应路由到特定页面不起作用

Question

我想在成功登录后重定向到产品页面，但我遇到了错误，我搜索的解决方案似乎都不起作用。我已经尝试过使用历史记录、重定向、使用路由器等。路由器的版本是："react router dom"："5.1.2">和我使用webPack进行测试。以下是文件：

Routes.js//所有导入完成

<BrowserRouter>
<div>
<NavBar/>
<Switch>
<Route path="/" component={Home} exact={true}/>
<Route path="/ChangeContext" component={ChangeContext}/> 
<Route path="/Products" component={Products}/> 
<Route path="/Login" component={Login}/> 
<Route path="/NotFound" component={NotFound}/>         
</Switch>
</div>
</BrowserRouter>

导航栏

<header>
<NavLink to="/" activeClassName="is-active" exact={true}>Home &nbsp;</NavLink>
<NavLink to="/Products" activeClassName="is-active" >Products &nbsp;</NavLink>
<NavLink to="/Login" activeClassName="is-active" >Login &nbsp;</NavLink>
<br></br>
</header>

登录.js

import { useHistory } from "react-router-dom";
const Login=()=>{
const history = useHistory();
const handleSubmit=e=>{
e.preventDefault();
let username=e.target.username.value;
let password=e.target.password.value;
let uname=localStorage.getItem("username");
let pwd=localStorage.getItem("password")
if((username===uname && password===pwd)&&(uname!="" && pwd!="")){
history.push("/Products");
}
else{
console.log("Try Again!",uname)

}

我得到以下错误：

Uncaught TypeError: (0 , _reactRouterDom.useHistory) is not a function
at Login (Login.js?d1d6:8)
at renderWithHooks (react-dom.development.js?cada:14985)
at mountIndeterminateComponent (react-dom.development.js?cada:17811)
at beginWork (react-dom.development.js?cada:19049)
at HTMLUnknownElement.callCallback (react-dom.development.js?cada:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js?cada:3994)
at invokeGuardedCallback (react-dom.development.js?cada:4056)
at beginWork$1 (react-dom.development.js?cada:23964)
at performUnitOfWork (react-dom.development.js?cada:22779)
at workLoopSync (react-dom.development.js?cada:22707)

Answer 1

您不需要导入{useHistory}。

只需在主组件函数中保留props作为参数，然后使用props.history.push('/Products')。

您也可以执行window.href.location="/Products"，但这将导致页面重新加载。

Answer 2

//History.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
//your component
import History from './History';
History.push('Products')