Category: React

Sometimes, we want to pass data when navigating programmatically with React Router.

In this article, we’ll look at how to pass data when navigating programmatically with React Router.

How to pass data when navigating programmatically with React Router?

To pass data when navigating programmatically with React Router, we can call navigate with an object.

Then we can use the useLocation hook to return the object’s data.

For instance, we write

const navigate = useNavigate();
navigate('/other-page', { state: { id: 7, color: 'green' } });

to call navigate with an object that we want to pass to the component we’re navigating to.

Then in the destination component, we write

const { state } = useLocation();
const { id, color } = state;

to call useLocation to return an object with the state property of the object that we passed into navigate.

Conclusion

To pass data when navigating programmatically with React Router, we can call navigate with an object.

Then we can use the useLocation hook to return the object’s data.

Sometimes, we want to use React Router with a layout page or multiple components per page.

In this article, we’ll look at how to use React Router with a layout page or multiple components per page.

How to use React Router with a layout page or multiple components per page?

To use React Router with a layout page or multiple components per page, we can create an array with the routes and layout component value for each route.

And then we can render the array into routes.

For instance, we write

const routes = [
  {
    layout: Layout1,
    subRoutes: [
      {
        path: "/route1/:id/:token",
        component: SetPassword,
      },
      {
        exact: true,
        path: "/",
        component: SignIn,
      },
    ],
  },
  {
    layout: Layout2,
    subRoutes: [
      {
        path: "/route2",
        component: Home,
      },
    ],
  },
];

const App = () => {
  //...
  return (
    <Switch>
      {routes.map((route, i) => (
        <Route
          key={i}
          exact={route.subRoutes.some((r) => r.exact)}
          path={route.subRoutes.map((r) => r.path)}
        >
          <route.layout>
            {route.subRoutes.map((subRoute, i) => (
              <Route key={i} {...subRoute} />
            ))}
          </route.layout>
        </Route>
      ))}
    </Switch>
  );
};

to define the routes array with the layout and subRoutes properties in each object entry.

Then in App, we call routes.map to render each route by calling map with a callback that returns an Router component wrapped around a route.layout component.

And then we render the route.subRoutes items into Routes by calling route.subRoutes.map with a callback to return the Route.

If route.layout renders the children prop then the components inside it should show.

Conclusion

To use React Router with a layout page or multiple components per page, we can create an array with the routes and layout component value for each route.

And then we can render the array into routes.

Sometimes, we want to use useParams() inside class component with react-router-dom.

In this article, we’ll look at how to use useParams() inside class component with react-router-dom.

How to use useParams() inside class component with react-router-dom?

To use useParams() inside class component with react-router-dom, we can use the withRouter higher order component.

For instance, we write

import React from "react";
import { withRouter } from "react-router";

class TaskDetail extends React.Component {
  componentDidMount() {
    const { id } = this.props.match.params;
    this.fetchData(id);
  }

  fetchData = (id) => {
    // ...
  };

  render() {
    return <div>Yo</div>;
  }
}

export default withRouter(TaskDetail);

to call withRouter with TaskDetail and export the component returned by withRouter.

As a result, in TaskDetail, we can get the route parameters from this.props.match.params.

Conclusion

To use useParams() inside class component with react-router-dom, we can use the withRouter higher order component.

Sometimes, we want to force a React Router to load a page, even if we’re already on that page.

In this article, we’ll look at how to force a React Router to load a page, even if we’re already on that page.

How to force a React Router to load a page, even if we’re already on that page?

To force a React Router to load a page, even if we’re already on that page, we can add the forceRefresh prop to the BrowserRouter component.

For instance, we write

<BrowserRouter forceRefresh>...</BrowserRouter>;

to add the forceRefresh prop to BrowserRouter.

Conclusion

To force a React Router to load a page, even if we’re already on that page, we can add the forceRefresh prop to the BrowserRouter component.

Sometimes, we want to hide navbar in login page in React Router.

In this article, we’ll look at how to hide navbar in login page in React Router.

How to hide navbar in login page in React Router?

To hide navbar in login page in React Router, we can put our nav bar inside the container with the authenticated routes.

For instance, we write

import React from "react";

const MyComponent = () => {
  //...
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <div>
            <NavBar />

            <Route exact path="/addproduct" component={Addproduct}></Route>
            <Route exact path="/products" component={Products}></Route>
          </div>
        </Switch>
      </Router>
    </div>
  );
};

to put NavBar at the same level as the 2 Routes that needs authentication.

NavBar is one level deeper than the Route that renders the Login component, so NavBar won’t be rendered with Login.

Conclusion

To hide navbar in login page in React Router, we can put our nav bar inside the container with the authenticated routes.