获取onClickItem以链接到react简单树菜单中的URL或路由

Question

尝试获取onClickItem以链接到react简单树菜单中的URL或路由。使用他们的例子：

<TreeMenu
data={treeData}
onClickItem={({ key, label, ...props }) => {
this.navigate(props.url);  // this line throws the error
}}
initialActiveKey='first-level-node-1/second-level-node-1'
debounceTime={125}>
</TreeMenu>

给出错误

Uncaught TypeError: Cannot read property 'navigate' of undefined
at onClickItem

当列表中的项目被点击时，我想根据props.URL链接到一个特定的URL，或者路由到被点击项目的id。

它在控制台中显示props.URL的正确URL和props.id 的正确id

<TreeMenu
data={treeData}
onClickItem={({ key, label, ...props }) => {
// this.navigate(props.url);
console.log(props.url, props.id);
}}
initialActiveKey='first-level-node-1/second-level-node-1'
debounceTime={125}>
</TreeMenu>

我尝试过的东西(是的，这是新的(：

<Link to={`/alignments/${props.id}`}></Link>
this.router.navigate.url(props.url);
this.navigation.navigate(props.url);
{this.props.navigation.navigate}
<Link to={props.url}></Link>
props.navigate(props.url);

React函数顶部的导入语句：

import React, {useState, useEffect} from 'react';
import './App.css';
import {Link} from 'react-router-dom';
import TreeMenu from 'react-simple-tree-menu';
import '../node_modules/react-simple-tree-menu/dist/main.css';

Answer 1

不确定你是否仍然对答案感兴趣，但也许其他人会觉得它很有用。我测试了你的代码，它像这样工作得很好：

<TreeMenu
data={treeData}
onClickItem={({ key, label, ...props }) => {
window.location.href = props.url;
}}
initialActiveKey='first-level-node-1/second-level-node-1'
debounceTime={125}>
</TreeMenu>

或者，如果你正在使用路由器，你可以简单地

props.history.push(props.url)

或使用链接