Author: John Au-Yeung

Sometimes, we want to fix React Router not loading CSS for nested pages on refresh.

In this article, we’ll look at how to fix React Router not loading CSS for nested pages on refresh.

How to fix React Router not loading CSS for nested pages on refresh?

To fix React Router not loading CSS for nested pages on refresh, we should use absolute paths for the href attribute value of the link tag.

For instance, we write

<link rel="stylesheet" href="/style.css" />

to add a link tag with the absolute path /style.css as the value of href.

Conclusion

To fix React Router not loading CSS for nested pages on refresh, we should use absolute paths for the href attribute value of the link tag.

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'.