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

【问题标题】：React routing to specific page not working反应路由到特定页面不起作用
【发布时间】：2021-04-18 18:30:54
【问题描述】：

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

Login.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)

【问题讨论】：

你从哪里导入 useHistory 钩子？
那是你的问题，你安装了错误的包版本。
尝试删除 node_modules 文件夹和 package-lock.json 文件，然后运行 npm install
只需运行npm install，如果它不起作用，您只需要删除node_modules或锁定文件作为最后的手段，但它应该。 npm update 也将起作用，并将所有 pacakges 更新为您的 package.json 允许的最新版本
也感谢@Nacho Zullo 的帮助！

标签： reactjs react-router-dom

【解决方案1】：

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

export default createBrowserHistory();

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

History.push('Products')

【讨论】：

这是一个误导性的答案。 OP 假设使用来自react-router-dom 的useHistory 钩子来处理历史。无需重新发明轮子，只需编写一次即可重复使用。

【解决方案2】：

您不需要导入{useHistory}。

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

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

【讨论】：

这可能是真的，但它只是避免了问题。他们需要解决依赖问题。
是的，但对于需要立即修复的人来说，可以使用它。