React Router使用useNavigate与直接输入URL/刷新时渲染不一致问题

直接输入URL访问/flow/1时React Flow渲染正常，但通过useNavigate进行内部导航到该路由时，渲染出现异常。所有代码运行在localhost环境。

组件 #

Flow.jsx #

import React, {useCallback} from 'react';
import ReactFlow, { useNodesState, useEdgesState, addEdge, Controls, ControlButton } from 'react-flow-renderer';

import { AiOutlineSubnode } from 'react-icons/ai';

import '../App.css';

const snapGrid = [20, 20];

const Flow = (props) => {
  const windowHeight = window.innerHeight;
  const divStyle = {
    width: '100%',
    height: windowHeight * 0.9
  }

  const [nodes, setNodes, onNodesChange] = useNodesState(props.nodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(props.edges);

  const onConnect = (params) => setEdges((eds) => addEdge(params, eds));

  const addNode = useCallback(() => {
    setNodes((n) => {
      var newId
      if (n.length > 0) {
        newId = n[n.length - 1].id + 1
      }
      else {
        newId = 1
      }
      return ([...n, {
        id: newId,
        type: "default",
        position: { x: 20, y: 10 },
        data: { label: "Enter title..." }

      }])
    })
  }, [setNodes])

  return (
    <div style={divStyle}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        snapToGrid={true}
        snapGrid={snapGrid}
        defaultZoom={1.5}
        fitView
        attributionPosition="bottom-left"
      >

        <Controls>
          <ControlButton onClick={addNode}>
            <AiOutlineSubnode />
          </ControlButton>
        </Controls>

      </ReactFlow>

    </div>
  );
};

export default Flow

Nav.jsx #

import React from 'react'

import Button from '@mui/material/Button'

export const Nav = (props) => {

  const windowHeight = window.innerHeight;

  const divStyle = {
    width: '100%',
    height: windowHeight*0.9
  }

  return (
    <div style={divStyle}>   
        <div>
            <Button variant='contained'
            onClick={()=>{
              alert("Nav")
              props.nav()
            }}
            >
              Send
            </Button>
      </div>
    </div>
  )
}

React Router #

路由配置（Router.js） #

import React from 'react';
import {
  createBrowserRouter,
  RouterProvider
} from "react-router-dom";
import RootRoute from './routes/RootRoute';
import IndexRoute from './routes/IndexRoute';
import FlowRoute from './routes/FlowRoute';
import { flowRouteLoader as flowLoader } from '../helpers/RouteLoaders'


const Router = () => {

  const router = createBrowserRouter([
    {
      path: "/",
      element: <RootRoute />,
      children: [
        {
          index: true,
          element: <IndexRoute />
        },
        {
          path: "flow/:userId",
          element: <FlowRoute />,
          loader: flowLoader
        }
      ]
    },

  ]);

  return (
    <RouterProvider router={router} />
  )
}

export default Router

路由组件 #

RootRoute.js

import React from 'react'
import { Outlet } from 'react-router-dom';

const RootRoute = () => {

    const windowHeight = window.innerHeight;

    const divStyle = {
      width: '100%',
      height: windowHeight*0.9
    }

    const headerStyle = {
        width: '100%',
        height: windowHeight*0.1,
        backgroundColor: '#000000'
    }

  return (
    <div>
        <div style = {headerStyle}>
        </div>
        <div style = {divStyle}>
            <Outlet/>
        </div>
    </div>
  )
}

export default RootRoute

IndexRoute.js

import React from 'react'
import { useNavigate } from "react-router-dom";
import  Nav  from "../../components/Nav.jsx";

const IndexRoute = () => {
  const navigate = useNavigate();

  const navigationFunction = (email) => {
    navigate('/flow/1')
  }

  return (
    <div>
      <Nav nav={navigationFunction} />
    </div>
  )
}

export default IndexRoute

FlowRoute.js

import React from 'react'
import Flow from '../../components/Flow'
import {useLoaderData} from "react-router-dom"


const FlowRoute = () => {
  const flow = useLoaderData();

  return (
    <div>
      <Flow nodes = {flow.nodes} edges = {flow.edges}/>
    </div>
  )
}

export default FlowRoute

路由加载器（RouteLoaders.js） #

export async function flowRouteLoader({params}){
    const nodesTemp = [{
        id: "1",
        type: "input", // input node
        data: { label: "Input Node"},
        position: { x: 100, y: 0 }
      }
      ]
    const edgesTemp = []
    const flow = {nodes: nodesTemp, edges: edgesTemp}
    return (flow)
}

内容的提问来源于stack exchange，提问作者Nate