Category: React

Sometimes, we want to use onClick event on React Router Link.

In this article, we’ll look at how to use onClick event on React Router Link.

How to use onClick event on React Router Link?

To use onClick event on React Router Link, we can put the states we want pass between routes in the URL parameter.

For instance, we write

<Link to={"/about/" + name}>{name}</Link>;

to add the name URL parameter to the /about route.

Then we can access the name URL parameter value in the component that renders when we go to /about by using

this.props.params.name

Conclusion

To use onClick event on React Router Link, we can put the states we want pass between routes in the URL parameter.

Sometimes, we want to get all routes as array with React Router.

In this article, we’ll look at how to get all routes as array with React Router.

How to get all routes as array with React Router?

To get all routes as array with React Router, we can use the react-router-to-array package.

To install it, we run

npm i react-router-to-array

Then we use it by writing

import React from "react";
import { Route, IndexRoute } from "react-router";
import reactRouterToArray from "react-router-to-array";

console.log(
  reactRouterToArray(
    <Route path="/" component={Home}>
      <Route path="about" component={About}>
        <Route path="home" component={Home} />
        <Route path="/home/:userId" component={Home} />
      </Route>
      <Route path="users" component={Users} />
      <Route path="*" component={NotFound} />
    </Route>
  )
);

to call reactRouterToArray with the Route component.

As a result, we should see an array of Route component path values logged.

Conclusion

To get all routes as array with React Router, we can use the react-router-to-array package.

Sometimes, we want to use react-router 4.0 to refresh current route and not reload the whole page.

In this article, we’ll look at how to use react-router 4.0 to refresh current route and not reload the whole page.

How to use react-router 4.0 to refresh current route and not reload the whole page?

To use react-router 4.0 to refresh current route and not reload the whole page, we can call history.push and then history.goBack.

For instance, we write

history.push('/temp');
history.goBack();

to call history.push with any path name to navigate.

Then we call history.goBack to go back to the original route.

This will refresh the current route without reloading the whole page.

Conclusion

To use react-router 4.0 to refresh current route and not reload the whole page, we can call history.push and then history.goBack.

Sometimes, we want to disable a link in React Router.

In this article, we’ll look at how to disable a link in React Router.

How to disable a link in React Router?

To disable a link in React Router, we can set the pointerEvents style to 'none'.

For instance, we write

<Link to="/" style={{ pointerEvents: "none" }}>
  Test
</Link>

to set the style prop to { pointerEvents: "none" } to disable mouse pointer actions on the Link.

Conclusion

To disable a link in React Router, we can set the pointerEvents style to 'none'.

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.