Author: John Au-Yeung

Sometimes, we want to add location state to a component with React Router and TypeScript.

In this article, we’ll look at how to add location state to a component with React Router and TypeScript.

How to add location state to a component with React Router and TypeScript?

To add location state to a component with React Router and TypeScript, we can use the useLocation hook in our components.

For instance, we write

import { RouteComponentProps, useLocation } from "react-router-dom";
import React from "react";

interface StateType {
  from: { pathname: string };
}

const Comp = () => {
  const { state } = useLocation<StateType>();

  console.log(state.from);
  //...
};

to create Comp component that calls the useLocation hook with and set the type parameter to StateType.

Then we get the state from the object returned from the hook and use it.

We override the unknown type returned by default by useLocation with the StateType interface.

Conclusion

To add location state to a component with React Router and TypeScript, we can use the useLocation hook in our components.

Sometimes, we want to fix the ‘You should not use Route or withRouter() outside a Router’ error with React Router v4.

In this article, we’ll look at how to fix the ‘You should not use Route or withRouter() outside a Router’ error with React Router v4.

How to fix the ‘You should not use Route or withRouter() outside a Router’ error with React Router v4?

To fix the ‘You should not use Route or withRouter() outside a Router’ error with React Router v4, we should wrap our app with the BrowserRouter component.

For instance, we write

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

to call ReactDOM.render with BrowserRouter wrapped around App so that we can use withRouter and Route in any component wrapped inside it without errors.

Conclusion

To fix the ‘You should not use Route or withRouter() outside a Router’ error with React Router v4, we should wrap our app with the BrowserRouter component.

Sometimes, we want to remove query parameters with React Router hooks.

In this article, we’ll look at how to remove query parameters with React Router hooks.

How to remove query parameters with React Router hooks?

To remove query parameters with React Router hooks, we can use the history.replace method with the an object argument with the search property set to the new query string.

For instance, we write

import React, { useState, useEffect } from "react";
import { useHistory, useLocation } from "react-router-dom";

export default function Foo() {
  const location = useLocation();
  const history = useHistory();

  useEffect(() => {
    const queryParams = new URLSearchParams(location.search);

    if (queryParams.has("error")) {
      queryParams.delete("error");
      history.replace({
        search: queryParams.toString(),
      });
    }
  }, []);

  return <>Component</>;
}

to get the query string from location.search.

Then we parse it with URLSearchParams into an object.

And then we check if the query string has the error parameter with queryParams.has.

If it’s true, we call queryParams.delete to remove the query string.

And then we call history.replace with an object with the new query string that we get with queryParans.toString to replace the query string with the new one.

Conclusion

To remove query parameters with React Router hooks, we can use the history.replace method with the an object argument with the search property set to the new query string.

Sometimes, we want to call router.push with state in Next.js.

In this article, we’ll look at how to call router.push with state in Next.js.

How to call router.push with state in Next.js?

To call router.push with state in Next.js, we can call router.push with an object with the query property to add a query string to the destination URL.

For instance, we write

import { useRouter } from "next/router";

const Comp = () => {
  const router = useRouter();
  //...

  const go = () => {
    router.push({
      pathname: "/about",
      query: { name: "Someone" },
    });
  };
  //...
};

to call the useRouter hook to get the router.

Then we call router.push with an object with the query property set to an object to add the key-value pairs inside as query parameters appended to the pathname.

Conclusion

To call router.push with state in Next.js, we can call router.push with an object with the query property to add a query string to the destination URL.

Sometimes, we want to declare React Router routes in a separate file and import them.

In this article, we’ll look at how to declare React Router routes in a separate file and import them.

How to declare React Router routes in a separate file and import them?

To declare React Router routes in a separate file and import them, we can create a function that returns the Router components with the Routes inside it.

For instance, we write

import React from "react";
import { Router, Route } from "react-router";
import { Foo, Bar, Baz } from "./templates";

const createRoutes = () => (
  <Router>
    <Route exact path="/foo" component={Foo} />
    <Route exact path="/bar" component={Bar} />
    <Route exact path="/baz" component={Baz} />
  </Router>
);

export default createRoutes;

to create the createRoutes function that returns the Router with the Routes and export it.

Then we use it by writing

import ReactDOM from "react-dom";
import createRoutes from "./routes";

const routes = createRoutes();

ReactDOM.render(routes, document.getElementById("root"));

to call createRoutes and use the returned routes in render.

Conclusion

To declare React Router routes in a separate file and import them, we can create a function that returns the Router components with the Routes inside it.