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

Question

我的菜单遇到了不同的问题。

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

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

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

其次，我有另一个 RETURN，其中包含我的子菜单。

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

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

警告：您尝试重定向到当前所在的同一路线：“/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 Router在 React 应用程序内进行重定向，而window.location.assign(menu.id)不是props.history.push(menu.id).

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

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 (...);
}