React 路由器更改 url 但不重新加载组件

Question

当我调用 move 到项目编辑器功能时，一切正常，历史将我传递到正确的组件，但是当我调用 move 以添加删除用户功能或移动到算法结果功能时，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})
    }

路线

<Route path={"/algorithmResults/:projectId?"}>
                <AlgorithmResult/>
            </Route>

            <Route path={"/manageUsers/:projectId?"}>
                <ManageProjectUsers/>
            </Route>

<Route path={"/editorsTabs/:umlEditorId?/:sqlEditorId?/:nfrEditorId?/:ahpEditorId?"} >
                <EditorsTabs />
            </Route>

请帮帮我。

Answer 1

那是因为您没有通过查看他们期望特定 id 的路线来正确定义路径，并且您没有在推送参数中定义它

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})
    }

Answer 2

似乎您的路由和路径是假设数据作为路径的一部分作为match.params 传递的，但链接是假设普通路由路径和数据通过location.state 上的路由状态传递的。选择其中一个并保持一致。

使用match.params

• 算法结果

  <Route path={"/algorithmResults/:projectId?"}>
    <AlgorithmResult/>
  </Route>
  

  导航到包含projectId 参数的路径：

  function moveToResults(){
    props.history.push(`/algorithmResults/${props.projectId}`);
  }
  

• 管理项目用户

  <Route path={"/manageUsers/:projectId?"}>
    <ManageProjectUsers/>
  </Route>
  

  导航到包含projectId 参数的路径：

  function moveToAddRemoveUsers(){
    props.history.push(`/manageUsers/${props.projectId}`);
  }
  

• EditorsTabs

  <Route path={"/editorsTabs/:umlEditorId?/:sqlEditorId?/:nfrEditorId?/:ahpEditorId?"}>
    <EditorsTabs />
  </Route>
  

  导航到包含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,
      }
    ));
  }
  

使用路由状态

路线：

<Route path="/algorithmResults" >
  <AlgorithmResult/>
</Route>
<Route path="/manageUsers" >
  <ManageProjectUsers/>
</Route>
<Route path="/editorsTabs" >
  <EditorsTabs />
</Route>

链接发送路由状态：

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 },
  );
}

Answer 3

问题出在历史对象上。我更新到 React Router v6 并用导航替换了历史记录，它解决了问题。