Блог

Главная - Вопросы по программированию - Маршрутизатор React изменяет URL — адрес, но не перезагружает компонент

Маршрутизатор React изменяет URL — адрес, но не перезагружает компонент

#reactjs #react-router #frontend

#реагирует на #реагировать-маршрутизатор #внешний интерфейс

Вопрос:

Когда я вызываю функцию «Переместить в редакторы проекта», все работает нормально, и история передает меня нужному компоненту, но когда я вызываю функцию «Переместить», чтобы добавить функцию «Удалить пользователей» или функцию «перейти к результатам алгоритма», URL-адрес изменился, но компонент не загружается, и я остаюсь в том же компоненте, что и был, и не получаю никаких ошибок. Я пытался сдать историю также в реквизите, но это не помогло.

Вот функции:

 function moveToProjectsEditors(){  props.history.push("/editorsTabs",{umlEditorId:props.umlEditor,sqlEditorId:props.sqlEditor,nfrEditorId:props.nfrEditor,ahpEditorId:props.ahpEditor})  }   function moveToAddRemoveUsers(){  props.history.push("/manageUsers",{projectId:props.projectId})  }   function moveToResults(){  props.history.push("/algorithmResults",{projectId:props.projectId})  }

Маршруты

 lt;Route path={"/algorithmResults/:projectId?"}gt;  lt;AlgorithmResult/gt;  lt;/Routegt;   lt;Route path={"/manageUsers/:projectId?"}gt;  lt;ManageProjectUsers/gt;  lt;/Routegt;  lt;Route path={"/editorsTabs/:umlEditorId?/:sqlEditorId?/:nfrEditorId?/:ahpEditorId?"} gt;  lt;EditorsTabs /gt;  lt;/Routegt;

Пожалуйста, помогите мне.

Комментарии:

1. Похоже , что ваши маршруты и пути записываются при условии, что данные передаются как часть пути as match.params , но ссылки записываются при условии, что обычные пути маршрута и данные передаются через состояние маршрута on location.state . Выберите одно или другое и будьте последовательны. Как только вы выберете один или другой и исправите код, если у вас все еще есть проблема, пожалуйста, обновите свой вопрос здесь новым соответствующим кодом, деталями и информацией.

2. Не могли бы вы приложить пример кода, потому что я не совсем понял, что вы имеете в виду. Путь к вкладкам редакторов работает нормально в текущем режиме, но другие маршруты не работают. Я также попытался добавить в ссылки параметры пути, как предложил пользователь ниже, но это тоже не помогло.

3. Кстати, я также попытался изменить маршрут и путь, чтобы они были вообще без параметров, и это вообще не работает.

Ответ №1:

Это связано с тем, что вы неправильно определяете путь, просматривая свои маршруты, они ожидают определенного идентификатора, и вы не определяете его в своих параметрах push

 function moveToProjectsEditors(){  props.history.push(`/editorsTabs/${props.umlEditor}/${props.sqlEditor}/${props.nfrEditor}/${props.ahpEditor}`,{umlEditorId:props.umlEditor,sqlEditorId:props.sqlEditor,nfrEditorId:props.nfrEditor,ahpEditorId:props.ahpEditor})  }   function moveToAddRemoveUsers(){  props.history.push(`/manageUsers/${props.projectId}`,{projectId:props.projectId})  }   function moveToResults(){  props.history.push(`/algorithmResults/${props.projectId}`,{projectId:props.projectId})  }

Комментарии:

1. Я попробовал то, что вы предложили, и это не сработало, я все еще не могу перейти к нужному компоненту в moveToAddRemoveUsers и moveToAlgoritmResults

2. можете ли вы рассказать мне, как вы определили маршруты

3. Что ты имеешь в виду? Я опубликовал, как я определил тогда в разделе Компонент маршрута

Ответ №2:

Похоже , что ваши маршруты и пути записываются при условии, что данные передаются как часть пути as match.params , но ссылки записываются при условии, что обычные пути маршрута и данные передаются через состояние маршрута on location.state . Выберите одно или другое и будьте последовательны.

С помощью match.params

  • Результат алгоритма 
     lt;Route path={"/algorithmResults/:projectId?"}gt;  lt;AlgorithmResult/gt; lt;/Routegt;

    Перейдите к пути, включающему projectId параметр:

     function moveToResults(){  props.history.push(`/algorithmResults/${props.projectId}`); }
  • Управляющие пользователи 
     lt;Route path={"/manageUsers/:projectId?"}gt;  lt;ManageProjectUsers/gt; lt;/Routegt;

    Перейдите к пути, включающему projectId параметр:

     function moveToAddRemoveUsers(){  props.history.push(`/manageUsers/${props.projectId}`); }
  • Таблицы редакторов 
     lt;Route path={"/editorsTabs/:umlEditorId?/:sqlEditorId?/:nfrEditorId?/:ahpEditorId?"}gt;  lt;EditorsTabs /gt; lt;/Routegt;

    Перейдите к пути, включающему параметры umlEditorId , sqlEditorId nfrEditorId , и. ahpEditorId 

     import { generatePath } from `react-router-dom`  function moveToProjectsEditors(){  props.history.push(generatePath(  "/editorsTabs/:umlEditorId/:sqlEditorId/:nfrEditorId/:ahpEditorId",  {  umlEditorId: props.umlEditor,  sqlEditorId: props.sqlEditor,  nfrEditorId: props.nfrEditor,  ahpEditorId: props.ahpEditor,  }  )); }

Использование состояния маршрута

Маршруты:

 lt;Route path="/algorithmResults" gt;  lt;AlgorithmResult/gt; lt;/Routegt; lt;Route path="/manageUsers" gt;  lt;ManageProjectUsers/gt; lt;/Routegt; lt;Route path="/editorsTabs" gt;  lt;EditorsTabs /gt; lt;/Routegt;

Ссылки, отправляющие состояние маршрута:

 function moveToProjectsEditors(){  props.history.push(  "/editorsTabs",  {  umlEditorId: props.umlEditor,  sqlEditorId: props.sqlEditor,  nfrEditorId: props.nfrEditor,  ahpEditorId: props.ahpEditor,  },  ); }  function moveToAddRemoveUsers(){  props.history.push(  "/manageUsers",  { projectId: props.projectId },  ); }  function moveToResults(){  props.history.push(  "/algorithmResults",  { projectId: props.projectId },  ); }

Ответ №3:

Проблема была с объектом истории. Я обновил маршрутизатор React v6 и заменил историю на навигацию, и это решило проблему.

Метки: ,