Reactjs 对不工作的特定页面响应路由

我想在成功登录后重定向到产品页面，但我遇到了错误，我搜索的解决方案似乎都不起作用。我已经尝试了使用历史记录、重定向、使用路由器等。路由器的版本是：“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>

我得到以下错误：

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)

---

您不需要导入

{useHistory}

只需将

props

作为主组件函数中的一个参数，然后使用

props.history.push（“/Products”）

---

您也可以执行

window.href.location=“/Products”

，但这会导致页面重新加载。

您从何处导入useHistory钩子？这就是您的问题，您安装了错误版本的软件包。请尝试删除node_模块文件夹和package-lock.json文件，然后运行npm install只需运行

npm install

，如果node_模块或锁文件不起作用，您只需在万不得已的情况下删除它们，但应该这样做

npm update

也将起作用，并将所有软件包更新为您的软件包允许的最新版本。jsontanks@Nacho Zullo也将为您提供帮助！这可能是真的，但它只是避免了问题。他们需要解决他们的依赖性问题。是的，这是真的，但对于需要立即解决的人来说，可以使用这个。这是一个错误的答案。OP假设使用

useHistory

hook from

react router dom

来处理历史记录。没有必要重新发明轮子，只要在编写之后重用即可。

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)

//History.js
import { createBrowserHistory } from 'history';

export default createBrowserHistory();

//your component
import History from './History';

History.push('Products')