Блог

Главная - Вопросы по программированию - Перенаправление страниц в React

Перенаправление страниц в React

#reactjs

#reactjs

Вопрос:

Я работаю над проектом в React, и я застрял на перенаправлении страниц. В принципе, когда я нажимаю кнопку, я должен перейти на другую страницу, но по какой-то причине это не работает, и я получаю эту ошибку TypeError: не удается прочитать свойство ‘push’ неопределенного. Вот мой код.

 import React from 'react';
import "./TaskBar.css";
import { useHistory } from 'react-router-dom';

function TaskBar () {
    const history = useHistory();
    const navigateTo = () => history.push('/https://twitter-clone-react-d198a.web.app')
    
    return (
        <div className="taskbar">
            <button className="button"onClick={navigateTo}><img src="/icons/menu.icon.ico.png"/></button> 
        </div>
        )
}


export default TaskBar

Комментарии:

1. Я думаю, useHistory возвращает undefined, если у вас есть : <Route path="..." component={TaskBar}> . это работает только для дочерних компонентов этого. для этого вы можете использовать : this.props.history.push('/path') вместо использования useHistory . и для дочерних элементов вы можете использовать: withrouter или useHistory . также обратите внимание, что вы можете использовать <a routerLink="..." >txt</a> вместо этого.

2. Я сделал это следующим образом <Router> <Link className=»button» onClick={() => { window. Расположение. href = ‘ clone-react-9f63a.web.app ‘; }} > <img src=»./icons/icons8-chrome-48.png»/> </Link> </Router>

3. извините, но это совсем не чисто. перемещается ли он без обновления?

4. Он делает это полностью

5. как я уже сказал, это делает

Ответ №1:

Перехватчики истории использования основаны на react-router-dom, если вы объявили маршрут только по ссылке выше, он работает, иначе он не будет. например, у вас есть 3 страницы: 1.Главная, 2. Редактировать, 3. Добавлять

 import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
 <Router>
              
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/Edit/:id" component={Edit} />
                    <Route path="/Add" component={Add} />
                </Switch>
            </Router>

в вашем компоненте панели задач

    import { useHistory } from 'react-router-dom';
function TaskBar () {

const history = useHistory();
const navigateTo = () => history.push('/')  //Home
const navigateTo = () => history.push('/Add')  //Add page
const navigateTo = () => history.push('/Edit/1')  //Edit page with id params

return (


 
    <div className="taskbar">
        <button className="button"onClick={navigateTo}><img src="/icons/menu.icon.ico.png"/></button> 
    </div>)}

Если вы хотите перейти на эту страницу, используйте тег привязки <a href="/https://twitter-clone-react-d198a.web.app"><img src="/icons/menu.icon.ico.png"/></a> или in, используя javascript location.href