在按钮组件ReactJS链接

Question

我有：

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>
    }
}

链接将通过道具传递英寸但我不知道怎么做，因为控制台是告诉我，它需要被包裹在路由器和路由。

我怎样才能得到这个工作？

---

控制台给我这个：

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>
    }

Answer 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>