Category: React Answers

Sometimes, we want to use useNavigate passing value to another component with react-router-dom v6.

In this article, we’ll look at how to use useNavigate passing value to another component with react-router-dom v6.

How to use useNavigate passing value to another component with react-router-dom v6?

To use useNavigate passing value to another component with react-router-dom v6, we can call navigate with an object as the 2nd argument.

For instance, we write

import { Link, useNavigate } from "react-router-dom";

const ComponentA = (props) => {
  const navigate = useNavigate();

  const toComponentB = () => {
    navigate("/componentB", { state: { id: 1, name: "sabaoon" } });
  };

  return (
    <>
      <div>
        <a onClick={() => toComponentB()}>Component B</a>
      </div>
    </>
  );
};

export default ComponentA;

to call navigate with the "/componentB" URL path and an object that we want to pass to the component that renders when we go to /componentB.

Then in ComponentB, which is rendered when we go to /componentB, we get the values from the useLocation hook by writing

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

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

  return (
    <>
      <div>{location.state.name}</div>
    </>
  );
};

export default ComponentB;

We call the useLocation hook to return the object that we passed in as the 2nd argument of navigate in ComponentA.

And then we get the properties from the location object.

Conclusion

To use useNavigate passing value to another component with react-router-dom v6, we can call navigate with an object as the 2nd argument.

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

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

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

To fix the "Cannot read property ‘push’ of undefined" error with React Router, we should call the withRouter component with our route component so the history object is available in the props.

For instance, we write

import { withRouter } from "react-router";

class App extends Component {
  push = () => {
    this.props.history.push("/foo");
  };
  //...
}

export default withRouter(App);

to call withRouter with App so that App has this.props.history.push set.

Now we call this.props.history.push with '/foo' to go to /foo.

Conclusion

To fix the "Cannot read property ‘push’ of undefined" error with React Router, we should call the withRouter component with our route component so the history object is available in the props.

Sometimes, we want to create dynamic routes in Gatsby.

In this article, we’ll look at how to create dynamic routes in Gatsby.

How to create dynamic routes in Gatsby?

To create dynamic routes in Gatsby, we modify the gatsby-node.js file to add routing dynamically.

For instance, we write

gatsbty-node.js

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions;

  if (page.path.match(/^\/app/)) {
    page.matchPath = "/app/*";

    createPage(page);
  }
};

to check if page.path matches the /^\/app/ with match.

If it does, we set matchPath to the pattern string to matches on client side.

And then we call createPage with page to update the page.

Then in app.js, we write

import { Router } from "@reach/router";

const SomeSubPage = (props) => {
  return <div>Hi from SubPage with id: {props.id}</div>;
};

const App = () => (
  <Layout>
    <Link to="/app/1">First item</Link>
    <Link to="/app/2">Second item</Link>

    <Router>
      <SomeSubPage path="/app/:id" />
    </Router>
  </Layout>
);

export default App;

to add our routes within Router.

Conclusion

To create dynamic routes in Gatsby, we modify the gatsby-node.js file to add routing dynamically.

Sometimes, we want to use normal anchor links with React Router.

In this article, we’ll look at how to use normal anchor links with React Router.

How to use normal anchor links with React Router?

To use normal anchor links with React Router, we can use the Link component.

For instance, we write

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

const Comp = () => {
  //...
  return (
    <Link to={{ pathname: "/this-view-path", hash: "#faq-1" }}>Question 1</Link>
  );
};

to render the Link component by setting the to prop to the destination we want to go when the link is clicked.

Link renders into an anchor element.

Conclusion

To use normal anchor links with React Router, we can use the Link component.

Sometimes, we want to use Jest to test a Link from React Router v4.

In this article, we’ll look at how to use Jest to test a Link from React Router v4.

How to use Jest to test a Link from React Router v4?

To use Jest to test a Link from React Router v4, we can wrap our component with StaticRouter before we mount it.

For instance, we write

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

test("Link matches snapshot", () => {
  const component = renderer.create(
    <StaticRouter location="someLocation" context={context}>
      <Link to="#" />
    </StaticRouter>
  );

  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

to wrap Link with StaticRouter before we call rendered.create.

Then we call component.toJSON to return the snapshot data.

And then we call expect and toMatchSnapshot` to check what’s rendered.

Conclusion

To use Jest to test a Link from React Router v4, we can wrap our component with StaticRouter before we mount it.