Category: React

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.

Sometimes, we want to disable a Link if it’s active in React Router.

In this article, we’ll look at how to disable a Link if it’s active in React Router.

How to disable a Link if it’s active in React Router?

To disable a Link if it’s active in React Router, we set the to path of the Link‘s pointer-events CSS property to none.

For instance, we write

<Link to="/bar" className="disabled-link">
  Bar
</Link>

to add the disabled-link class to the Link.

And we set the disabled-link class’ CSS by writing

.disabled-link {
  pointer-events: none;
}

to disable the mouse pointer we usually see over a link with pointer-events with none.

Conclusion

To disable a Link if it’s active in React Router, we set the to path of the Link‘s pointer-events CSS property to none.