javascript - 如何解决 react Material 菜单中的重定向问题

Question

使用我的菜单时，我遇到了不同的问题。

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

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

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

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

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

但是，我在控制台中遇到错误:

Warning: You tried to redirect to the same route you're currently on: "/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对于 React 应用程序内的重定向，而不是 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 (...);
}