Маршрутизация реакции на определенную страницу не работает

#reactjs #react-router-dom

Вопрос:

Я хочу перенаправить на страницу продукта после успешного входа в систему, но я получаю ошибки, ни одно из решений, которые я искал, похоже, не работает. Я уже пробовал 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 amp;nbsp;</NavLink>
        <NavLink to="/Products" activeClassName="is-active" >Products amp;nbsp;</NavLink>
        <NavLink to="/Login" activeClassName="is-active" >Login amp;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 amp;amp; password===pwd)amp;amp;(uname!="" amp;amp; 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)

1. Откуда вы импортируете перехват useHistory?

2. Тогда у вас проблема, у вас установлена неправильная версия пакета.

3. попробуйте удалить папку node_modules и файл package-lock.json, а затем запустите npm install

4. Просто запустите npm install , вам нужно только удалить node_modules или файл блокировки в качестве последнего средства, если это не сработает, но должно. npm update также будет работать и обновит все пакеты до самых последних версий, разрешенных вашим package.json

5. Спасибо @Nacho Zullo за вашу помощь!

Ответ №1:

Вам не нужно импортировать {useHistory} .

Просто сохраните props в качестве параметра в функции основного компонента, а затем используйте props.history.push('/Products') .

Вы также можете сделать window.href.location="/Products" , но это приведет к перезагрузке страницы.

1. Это может быть правдой, но это просто позволяет избежать проблемы. Им необходимо исправить проблему с зависимостями.

2. да, это правда, но для тех, кто нуждается в немедленном исправлении, может использовать это.

Ответ №2:

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

export default createBrowserHistory();

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

History.push('Products')

1. Это такой неправильный ответ. OP предполагает использовать useHistory hook from react-router-dom для работы с историей. Нет необходимости изобретать велосипед, просто повторно используйте один раз написанный.