title: how to add props in route component in react-router-dom v6
body: <p>As heading states, I used to have a page with a stateful component that gets different props based on changes to url made from .</p>
  <p>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.</p>
  <p>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.</p>
  <p>Please could someone suggest a solution for my set-up?</p>
  <p><strong>CalculatorPage.tsx</strong></p>
  <pre><code>
  import Calculator from &quot;../components/Calculator&quot;;
  import { Route, Routes } from &quot;react-router&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  import { FlowrateCalc } from &quot;../calc/calculators/FlowrateCalc&quot;;
  import { ValveKvsCalc } from &quot;../calc/calculators/ValveKvsCalc&quot;;
  import { AccelerationCalc } from &quot;../calc/calculators/AccelerationCalc&quot;;
  
  export default function CalculatorPage() {
    return (
      &lt;div&gt;
        {/* when changing links, there is no props being sent to Calculator. Calculator is a STATEFUL component*/}
        &lt;Routes&gt;
          &lt;Route
            path={&quot;flow&quot;}
            element={&lt;Calculator {...FlowrateCalc} /&gt;}
          /&gt;
          &lt;Route
            path={&quot;kvs&quot;}
            element={&lt;Calculator {...ValveKvsCalc} /&gt;}
          /&gt;
          &lt;Route
            path={&quot;acceleration&quot;}
            element={&lt;Calculator {...AccelerationCalc} /&gt;}
          /&gt;
        &lt;/Routes&gt;
        
        &lt;Link to={&quot;flow&quot;}&gt;
          &lt;button style={{ color: &quot;green&quot; }}&gt;flow&lt;/button&gt;
        &lt;/Link&gt;
        &lt;Link to={&quot;kvs&quot;}&gt;
          &lt;button style={{ color: &quot;red&quot; }}&gt;kvs&lt;/button&gt;
        &lt;/Link&gt;
        &lt;Link to={&quot;acceleration&quot;}&gt;
          &lt;button style={{ color: &quot;blue&quot; }}&gt;acceleration&lt;/button&gt;
        &lt;/Link&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p><strong>Main.tsx</strong></p>
  <pre><code>import { Route , Routes} from &quot;react-router-dom&quot;;
  import HomePage from &quot;../pages/HomePage&quot;;
  import CalculatorPage from &quot;../pages/CalculatorPage&quot;;
  import AboutPage from &quot;../pages/AboutPage&quot;;
  
  
  export default function Main() {
    return (
      &lt;div&gt;
        &lt;Routes&gt;
          &lt;Route path=&quot;/&quot; element={&lt;HomePage/&gt;} /&gt;
          &lt;Route path=&quot;/calculator/*&quot; element={&lt;CalculatorPage/&gt;} /&gt;
          &lt;Route path=&quot;/about&quot; element={&lt;AboutPage/&gt;} /&gt;
        &lt;/Routes&gt;
  
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p><strong>App.tsx</strong></p>
  <pre><code>import { BrowserRouter } from &quot;react-router-dom&quot;;
  
  import Header from &quot;./layout/Header&quot;;
  import Footer from &quot;./layout/Footer&quot;;
  import Main from &quot;./layout/Main&quot;;
  
  export default function App() {
    return (
      &lt;div&gt;
        &lt;BrowserRouter&gt;
          &lt;Header /&gt;
          &lt;Main /&gt;
          &lt;Footer /&gt;
        &lt;/BrowserRouter&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>Index.tsx</strong></p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import { Provider } from &quot;react-redux&quot;;
  import { store } from './state';
  import reportWebVitals from './reportWebVitals';
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;Provider store={store}&gt;
      &lt;App /&gt;
      &lt;/Provider&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  
  reportWebVitals();
  
  </code></pre>