Question

我的菜单遇到了其他问题。

对于初学者，在第一个RETURN中，我有一个带有LISTITEM和LISTITETEXT的TREEITEM。

我在LISTITETEXT中放置了一个OnClick，以便如果我的菜单的id等于一个值，则我授权重定向。

但是，重定向会重新加载页面，当我使用react时，这不是我菜单的目的。

第二，我还有另一个RETURN，其中包含子菜单。

它显示正确，当我单击TREEITEM时，我被重定向到了正确的页面。

但是，控制台中出现错误：

警告：您试图重定向到当前所在的路线： “ / extranetV1 / prospect”

{stoMenu && (
                <TreeView
                  style={layout.menu}
                  defaultCollapseIcon={<ArrowDropDownIcon />}
                  defaultExpandIcon={<ArrowRightIcon />}
                >
                  {stoMenu.root.children.map(menu => {
                    return (
                      <TreeItem
                        key={menu.nodeId}
                        nodeId={menu.nodeId}
                        label={
                          <ListItem style={layout.menuListItem} className={menu.iconCls}>
                            <ListItemText style={layout.menuText} primary={menu.text} onClick={() => {
                              if (menu.id === '/accueil') {
                                window.location.assign(menu.id);
                              }
                            }} />
                          </ListItem>
                        }
                      >
                        {menu.children.map(child => {
                          return (
                            <TreeItem
                              key={child.nodeId}
                              nodeId={child.nodeId}
                              label={child.text}
                            >
                                  <Redirect to={child.id}/>
                            </TreeItem>
                          );
                        })}
                      </TreeItem>
                    );
                  })}
                </TreeView>
              )}

Answer 1

对于这两种情况，您都使用重定向来做出错误反应。

您需要在React应用中使用react router进行重定向，而不是window.location.assign(menu.id)，它将是props.history.push(menu.id)。

我在第二篇中看到您使用Redirect组件。问题是您在循环中每次触发重定向。您应该改为设置一些状态，并在代码前面的条件下触发渲染。

const MyComponent = (props) => {
  const [state, setState] = useState({ pathToRedirect: null });

  const handleRedirect = (to) => {
    setState({ pathToRedirect: to});
  }

  render () {
     if (state.pathToRedirect) {
       return <Redirect to={state.pathToRedirect} />;
     }
     //render list with handleRedirect onClick
     return (...);
}

Answer 2

要解决重新加载页面的问题，我对此进行了整合：

                      <TreeItem
                        key={menu.nodeId}
                        nodeId={menu.nodeId}
                        label={
                          <ListItem style={layout.menuListItem} className={menu.iconCls}>
                            <ListItemText style={layout.menuText} primary={menu.text} onClick={() => {
                              if (menu.id === '/accueil') {
                                this.props.history.push(menu.id);
                              }
                            }} />
                          </ListItem>
                        }
                      >

我通过此操作在子菜单中删除了REDIRECT：

                           <TreeItem
                              key={child.nodeId}
                              nodeId={child.nodeId}
                              label={child.text}
                              onClick={() => {
                                if (child.id) {
                                  this.props.history.push(child.id);
                                }
                              }}
                            />

如何解决反应物料菜单中的重定向问题

2 个答案: