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

Unless anyone has another answer, there seem to be no such solution. As of react router v6 there is no passing of props via router. Instead we have to use functional components and react router hooks to detect url changes.

Answer 2

You can use hooks provided by react-router-dom to pull params data from the URL.

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

const params = useParams(); // inside your component

This allows you to pull data from the URL

This official docs link might help you as well

Answer 3

You can create a store, and if needed, useSelector hook help you usefully for that time. With using useSelector, you easily will get the store's state.

use:

import React from 'react'
import { useSelector } from 'react-redux'

export const CounterComponent = () => {
  const counter = useSelector((state) => state.counter)
  return <div>{counter}</div>
}

Thanks.