how to add props in route component in react-router-dom v6

Question

As heading states, I used to have a page with a stateful component that gets different props based on changes to url made from .

Now, upgraded to react router v6, I really do not understand how to make it work again. I do understand that the only way to solve this now is using hooks such as useNavigate, but I do not know how this can be implemented in my code. I have read through react-router v6 documentation and still do not understand how to solve my issue.

Se below codes. Codes are ordered from child component and up to index.tsx. component is extensive and is basically a statfulcomponent that gets its states from props. And based on the props given it will display its content accordingly.

Please could someone suggest a solution for my set-up?

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();

Answer 1

You can definitely can pass props to the components of a Routes Router...

Check it:

<Router>
  <Routes>
    <Route path='/page' element={<Page props={'helloWorld from Props'}/>}/>
  </Routes>
</Router>

And then in Page.js:

function Page(props){

console.log(props)

return(
    <div>
    </div>

It seems to work just like it did before. shrug