Ссылка ReactJS в компоненте кнопки
У меня есть:
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
export default class NavItem extends Component {
render() {
return <Link to = {'/test'}>
<div className = "navbar__item">
<img src = {'png/navigation/' + this.props.icon}/>
</div>
</Link>
}
}
Где ссылка будет передана через prop. Но я не уверен, как это сделать, так как консоль говорит мне, что ее нужно обернуть в Router и Route.
Как я могу заставить это работать?
Консоль дает мне это:
Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.
Мне удалось сделать это так:
render() {
return <BrowserRouter>
<Link to = {this.props.url}>
<div className = "navbar__item">
<img src = {'png/navigation/' + this.props.icon}/>
</div>
</Link>
</BrowserRouter>
}
@ Эндрю, я не уверен, это просто кнопка, которая отправляет пользователя на другую страницу в моем приложении. Является ли ссылка правильным способом сделать это? или мне просто использовать тег <a>?
Ссылка обычно используется в реакции, а не в теге Anchor. Я не вижу, чтобы вы получали ссылку в качестве поддержки в своем коде, а также где находится журнал консоли. Пожалуйста, поделитесь актуальной информацией
@HemadriDasari Я обновил свой вопрос тем, что в консоли.
Ссылка должна быть под маршрутами, что означает, что NavItem должен вызываться под маршрутами.
@HemadriDasari, но все мои маршруты хранятся в App.js
Не могли бы вы привести пример?
Пожалуйста, проверьте это stackoverflow.com/questions/44499919/…
@HemadriDasari Мне удалось заставить его работать, смотрите мой отредактированный вопрос.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я считаю, что вы просто хотите использовать history.push в качестве обработчика onclick. Он делает то же самое, что и Link.
handleRouteChange = () => {
history.push(this.props.routeName)
}
render() {
return (
<button onClick = {this.handleRouteChange}>
click
</button>
)
}
В какой-то момент инициализации вашего приложения вы должны передать объект history. импортируйте любой компонент, который нуждается в history. Он имеет метод push.
export const history = createHashHistory()
<Router history = {history}>
<Routes />
</Router>
Откуда берется исторический объект?
Обновлено. Это тот же объект, который вы передаете в HOC маршрута реагирования.
Вы ищете маршрутизацию, которая использует кнопку для перенаправления, в отличие от
Link?history.pushв обработчике щелчка может выполнить то же самое.