Как исправить проблемы с перенаправлением в меню реагирующих материалов

Question

С моим меню я сталкиваюсь с другой проблемой.

Для стартеров , в первом ВОЗВРАТЕ у меня есть TREEITEM с LISTITEM и LISTITETEXT.

Я положилOnClick в LISTITETEXT, чтобы, если идентификатор моего меню был равен значению, я авторизовал перенаправление.

Однако перенаправление перезагружает страницу, и это не является целью моего меню, когда я использую реагировать.

Второй , у меня есть другой 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

Для обоих сценариев вы используете перенаправление в реакции неправильно.

Вам нужно использовать реагирует маршрутизатор для перенаправления внутри приложения реакции, и вместо 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);
                                }
                              }}
                            />