React Typescript Router(5.1.8) data is not passing to other component as a query params

Question

When I click the button I want to navigate to another component and need to pass some data as query parameters. below is my react code.

interface Props {

    }
    
    const App: React.FC<Props> = ({}) => {
    
    
     return (
              <BrowserRouter>
                <Switch>
                   <Route path="/admin/NotificationManager/" exact  component={NotificationPanelComponent} />
                  <Route path="/admin/NotificationManager/notification/new" exact  component={NewNotification} />
                  <Route path="/admin/NotificationManager/notification/edit/:notificationId" exact component={NewNotification}/>
                </Switch>
              </BrowserRouter>
              
              
               <Button
                                onClick={() => {
    
                                     history.push('/admin/NotificationManager/notification/edit?notificationId=1234');
    
                                }}
                                text = "EDIT"
                                classN="editB"
                                disabled={false}
                            />
        );
    
    }

export default App;

---

interface Props{
    

}



const NewNotification: React.FC<Props> = ({}) => {

    const location = useLocation();
    const query = new URLSearchParams(location.search);

    console.log("query",query); // nothing prints

    const {notificationId} = useParams<{notificationId:string}>();//nothing print


}

export default NewNotification;

when I try to print the params value in navigated component nothing prints and even the page is not loaded.

Answer 1

Issue

You are navigating to "/admin/NotificationManager/notification/edit?notificationId=1234".

Here the path is "/admin/NotificationManager/notification/edit" and a queryString search is "?notificationId=1234". There is no exactly matching path for "/admin/NotificationManager/notification/edit".

These are the routes you render:

<BrowserRouter>
  <Switch>
    <Route
      path="/admin/NotificationManager/"
      exact
      component={NotificationPanelComponent}
    />
    <Route
      path="/admin/NotificationManager/notification/new"
      exact
      component={NewNotification}
    />
    <Route 
      path="/admin/NotificationManager/notification/edit/:notificationId"
      exact
      component={NewNotification}
    />
  </Switch>
</BrowserRouter>

Solution(s)

In the NewNotification you are trying a couple methods for accessing this notification id value:

1. QueryString search params

   const location = useLocation();
   const query = new URLSearchParams(location.search);
   

   Here you would need to access the notificationId value by accessing the appropriate queryString get method, i.e. query.get("notificationId").

   To address, you need to fix the route so it can match this path you are attempting to route to:

   <Route 
     path="/admin/NotificationManager/notification/edit"
     exact
     component={NewNotification}
   />
   

   Access the queryString value in the routed component:

   const location = useLocation();
   const query = new URLSearchParams(location.search);
   const notificationId = query.get("notificationId");
   

2. Route path params

   const { notificationId } = useParams<{notificationId:string}>();
   

   Here you would need to pass notificationId as a route param and then also navigate to the correct path. Use a templated string to inject the notificationId into the path.

   history.push(`/admin/NotificationManager/notification/edit/${1234}`);
   

   Or use the generatePath utility.

   history.push(generatePath(
     "/admin/NotificationManager/notification/edit/:notificationId",
     { notificationId: 1234 }
   ));
   

   Access the notificationId route param in the routed component:

   const { notificationId } = useParams<{notificationId:string}>();
   

Answer 2

React router in functional components doesnt pass route params as props. They can by accessed by useParams() hook. In your case if you want to obtain notificationId in NewNotification.tsx

const {notificationId} = useParams();

PS: dont confuse url parameters and search query, URLSearchParams(location.search); will acces search query, which is specified in url as http://something.com/page?firstQuery=1&secondQuery=something