score:1

Accepted answer

You need to add in routes:

<Route path="/reports/daily-sales-single/:from?/:to?" component={DailySalesSingle} />

Then in the functional component:

interface RouterProps {
  match: any;
}

type Props = RouterProps;

const functionalComponent = ({
  match,
 }: Props) => {
     console.log(match.params);
 })

score:0

I did this:

const MyComponent = (props) => {
    console.log("query",props.location.search)
    }

score:1

If you are using functional components and typescript you may use the following to get your router parameters:

In the router:

<Route exact path="/portal/welcome2/:sms" component={Welcome2}></Route>

In the component:

import React, { FC } from 'react';
import { useParams } from 'react-router-dom';

type WelcomeParams = {
  sms: string;
};

const Welcome2: FC = () => {
  const { sms } = useParams<WelcomeParams>();

  return (
    <h1>Welcome! here {sms}</h1>

  );
};

export default Welcome2;

score:1 

<main>
      <Routes>
      <Route path="/cart/:id" element={<CartScreen />} />
      <Route path="/" element={<HomeScreen />} exact />
      <Route path="/product/:id" element={<ProductScreen />} />
      </Routes>
    </main>

this code is based on new react update make sure you dont pass any query string into route such as

<Route path="/cart/:id?xyz" element={<CartScreen />} /> //dont do this

on the other file where you want to get your query string:

 import React from 'react';
import { useParams } from 'react-router-dom';
import { useLocation } from 'react-router-dom';


const CartScreen = () => {
    const params = useParams()
    const productId = params.id;
    const search = useLocation().search;
  const qty = new URLSearchParams(search).get('qty');
    return <div><h1>Cart Screen</h1> 
<p>Product: {productId}, Qty: { qty}</p></div>;
};

score:3

I use this way:

const MyComponent = (props) => {

    console.log(props.match.params.id)
}

Related Query

More Query from same tag