#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
, но ссылки записываются при условии, что обычные пути маршрута и данные передаются через состояние маршрута onlocation.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 и заменил историю на навигацию, и это решило проблему.