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.
CodePudding user response:
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
CodePudding user response:
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:
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 queryStringget
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");
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 thenotificationId
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}>();