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>

按钮组件中的ReactJS Link

1 个答案: