How to receive query params in React with reatc-router-dom?

Question

I’m making an App, using React with typescript and React-router-dom. But I’m having a hard time working with query params on routes. My initial goal was just to receive the token and email that comes in the params query.

The token is here in the following format:

http://localhost:3000/User/ConfirmEmail/?token=asdas&[email protected]

Routes.tsx

   <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route
          exact
          path="/User/ConfirmEmail/:token"
          component={ConfirmEmail}
        />
      </Switch>
    </Router>

confirmEmail.tsx

interface ParamTypes {
  token: string;
  email: string;
}

const ConfirmEmail: React.FC = () => {
  const { token, email } = useParams<ParamTypes>();

  useEffect(() => {
    console.log(token, email);
  });

  return (
    <>
        {token}
        {email}
    </>
  );
};

I’ve been doing research for two days, and I find very few people talking about a similar example. The most I can find are examples of the React-router-dom that is in his documentation. Thanks for your help!

Answer 1

The documentation explains how this type of approach in its variables Query creating a Hook auxiliary as follows:

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

function useQuery() {
  return new URLSearchParams(useLocation().search);
}

export { useQuery };

that code is in the documentation and resolve to create it for exemplification.

After that it only matters the code in its component ConfirmEmail with the following layout:

import React from "react";

import { useQuery } from "../../Hooks";

const ConfirmEmail: React.FC = () => {
  const query = useQuery();
  return (
    <>
      <div>Confirm Email</div>
      <div>{query.get("token")}</div>
      <div>{query.get("email")}</div>
    </>
  );
};

export default ConfirmEmail;

Besides your file that configures the routes should also have some modifications in the route settings:

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import Home from "./Components/Home";
import ConfirmEmail from "./Components/ConfirmEmail";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/user/confirm-email?token=123456&[email protected]">
                Confirm Email
              </Link>
            </li>
          </ul>
        </nav>
        <div>
          <Switch>
            <Route path="/user/confirm-email">
              <ConfirmEmail />
            </Route>
            <Route path="/" exact>
              <Home />
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

---

• Note: path names put them all in lowercase and if you have a composite name separated by dash as demonstrated in all codes.

• Example: ONLINE of the documentation itself