正如标题所述，我曾经有一个带有状态组件的页面，该组件根据对url的更改获得不同的profiles。
现在，升级到React路由器v6，我真的不明白如何使它再次工作.我知道现在解决这个问题的唯一方法是使用诸如useNavigate之类的钩子，但我不知道如何在我的代码中实现这一点。我已经阅读了react-router v6文档，仍然不明白如何解决我的问题。
下面的代码。代码从子组件排序，直到index. tsx。组件是广泛的，基本上是一个statfulcomponent，它从props中获取其状态。并根据给定的 prop ，它将相应地显示其内容。
有人能为我的设置建议一个解决方案吗？

*CalculatorPage.tsx

import Calculator from "../components/Calculator";
import { Route, Routes } from "react-router";
import { Link } from "react-router-dom";

import { FlowrateCalc } from "../calc/calculators/FlowrateCalc";
import { ValveKvsCalc } from "../calc/calculators/ValveKvsCalc";
import { AccelerationCalc } from "../calc/calculators/AccelerationCalc";

export default function CalculatorPage() {
  return (
    <div>
      {/* when changing links, there is no props being sent to Calculator. Calculator is a STATEFUL component*/}
      <Routes>
        <Route
          path={"flow"}
          element={<Calculator {...FlowrateCalc} />}
        />
        <Route
          path={"kvs"}
          element={<Calculator {...ValveKvsCalc} />}
        />
        <Route
          path={"acceleration"}
          element={<Calculator {...AccelerationCalc} />}
        />
      </Routes>
      
      <Link to={"flow"}>
        <button style={{ color: "green" }}>flow</button>
      </Link>
      <Link to={"kvs"}>
        <button style={{ color: "red" }}>kvs</button>
      </Link>
      <Link to={"acceleration"}>
        <button style={{ color: "blue" }}>acceleration</button>
      </Link>
    </div>
  );
}

Main.tsx

import { Route , Routes} from "react-router-dom";
import HomePage from "../pages/HomePage";
import CalculatorPage from "../pages/CalculatorPage";
import AboutPage from "../pages/AboutPage";

export default function Main() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<HomePage/>} />
        <Route path="/calculator/*" element={<CalculatorPage/>} />
        <Route path="/about" element={<AboutPage/>} />
      </Routes>

    </div>
  );
}

App.tsx

import { BrowserRouter } from "react-router-dom";

import Header from "./layout/Header";
import Footer from "./layout/Footer";
import Main from "./layout/Main";

export default function App() {
  return (
    <div>
      <BrowserRouter>
        <Header />
        <Main />
        <Footer />
      </BrowserRouter>
    </div>
  );
}

Index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from "react-redux";
import { store } from './state';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();