Category: React Answers

Sometimes, we want to fix the "Cannot read property ‘history’ of undefined" error React Router 5.

In this article, we’ll look at how to fix the "Cannot read property ‘history’ of undefined" error React Router 5.

How to fix the "Cannot read property ‘history’ of undefined" error React Router 5?

To fix the "Cannot read property ‘history’ of undefined" error React Router 5, we should wrap our route components inside Router.

Then we can call useHistory in the components to return the history object.

For instance, we write

const AppWrapper = () => {
  return (
    <Router>
      <App />
    </Router>
  );
};

to add the AppWrapper component that wraps Router in App.

Then in App, we write

const App = () => {
  const history = useHistory();
  //...
};

to call useHistory to return the history object.

Conclusion

To fix the "Cannot read property ‘history’ of undefined" error React Router 5, we should wrap our route components inside Router.

Then we can call useHistory in the components to return the history object.

Sometimes, we want to pass parameters to component with React Router.

In this article, we’ll look at how to pass parameters to component with React Router.

How to pass parameters to component with React Router?

To pass parameters to component with React Router, we can use the useParams hook.

For instance, we write

<Route path="/details/:id" component={DetailsPage} />;

to add the id parameter to our route.

Then in DetailsPage, we write

import { useParams } from 'react-router';

export default function DetailsPage() {
  const { id } = useParams();
  // ...
}

to call the useParmas hook and get the id property from the returned object to get the value of the id URL parameter.

Conclusion

To pass parameters to component with React Router, we can use the useParams hook.

Sometimes, we want to fix the ‘You should not use Link outside a Router’ error with React Router.

In this article, we’ll look at how to fix the ‘You should not use Link outside a Router’ error with React Router.

How to fix the ‘You should not use Link outside a Router’ error with React Router?

To fix the ‘You should not use Link outside a Router’ error with React Router, we should make sure Link is only used in components that are inside Router.

For instance, we write

const App = () => (
  <BrowserRouter>
    <div className="sans-serif">
      <Route path="/" component={Main} />
      <Route path="/view/:postId" component={Single} />
    </div>
  </BrowserRouter>
);

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

to add some Routes in BrowserRouter.

Then we Link in Main by writing

import React from "react";
import { Link } from "react-router-dom";

const Main = () => (
  <div>
    <h1>
      <Link to="/">Example</Link>
    </h1>
  </div>
);

export default Main;

Conclusion

To fix the ‘You should not use Link outside a Router’ error with React Router, we should make sure Link is only used in components that are inside Router.

To redirect from / to another page with Next.js, we can get the pathname property from the Router object and do the redirect if pathname is '/'.

For instance, we write

import React, { useEffect } from "react";
import Router from "next/router";

const Comp = () => {
  //...
  useEffect(() => {
    const { pathname } = Router;
    if (pathname === "/") {
      Router.push("/hello");
    }
  });
  //...
};

to call get pathname from Router.

And if pathname is '/', then we call Router.push to go to the URL we want.

This works with Next.js 10.x

Sometimes, we want to detect route change with React Router.

In this article, we’ll look at how to detect route change with React Router.

How to detect route change with React Router?

To detect route change with React Router, we can use the useLocation hook.

For instance, we write

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

const SomeComponent = () => {
  const location = useLocation();

  useEffect(() => {
    console.log("Location changed");
  }, [location]);

  //...
};

to call useLocation to return the location object.

Then we listen for changes to the location object with the useEffect hook.

As a result, when there’s a route change, location changes, and the useEffect callback is run.

Conclusion

To detect route change with React Router, we can use the useLocation hook.