Author: John Au-Yeung

Sometimes, we want to target active link when the route is active in Next.js.

In this article, we’ll look at how to target active link when the route is active in Next.js.

How to target active link when the route is active in Next.js?

To target active link when the route is active in Next.js, we can set the className prop to return the class name we want after we check the current route we’re on.

For instance, we write

import Link from "next/link";
import { useRouter } from "next/router";

export const Nav = () => {
  const router = useRouter();

  return (
    <ul>
      <li className={router.pathname === "/" ? "active" : ""}>
        <Link href="/">home</Link>
      </li>
      <li className={router.pathname === "/about" ? "active" : ""}>
        <Link href="/about">about</Link>
      </li>
    </ul>
  );
};

to add the Nav component that calls the useRouter hook to return the router object.

And then we use the router.pathname property to check the current route we’re on.

We then set className to 'active' if router.pathname returns the route value we’re checking again and an empty string otherwise.

Conclusion

To target active link when the route is active in Next.js, we can set the className prop to return the class name we want after we check the current route we’re on.

Sometimes, we want to fix onEnter not called in React Router.

In this article, we’ll look at how to fix onEnter not called in React Router.

How to fix onEnter not called in React Router?

To fix onEnter not called in React Router, we can set the render prop instead of the onEnter prop to a function that renders the component we want.

For instance, we write

<Route
  exact
  path="/home"
  render={() => (isLoggedIn() ? <Redirect to="/front" /> : <Home />)}
/>

to set the render prop to a function that renders Redirect is isLoggedIn returns true and Home otherwise.

Conclusion

To fix onEnter not called in React Router, we can set the render prop instead of the onEnter prop to a function that renders the component we want.

Sometimes, we want to add an active class to a Link from React Router.

In this article, we’ll look at how to add an active class to a Link from React Router.

How to add an active class to a Link from React Router?

To add an active class to a Link from React Router, we can use the NavLink component with the activeClassName prop.

For instance, we write

<NavLink to="/hello" activeClassName="active">
  Hello
</NavLink>

to add a NavLink component with the to prop set to the destination URL.

And the activeClassName set to the CSS class that we apply when we reach the destination URL.

Conclusion

To add an active class to a Link from React Router, we can use the NavLink component with the activeClassName prop.

Sometimes, we want to navigate programmatically in React Router v4.

In this article, we’ll look at how to navigate programmatically in React Router v4.

How to navigate programmatically in React Router v4?

To navigate programmatically in React Router v4, we can use the this.props.history.push method.

For instance, we write

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

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
    };
  }

  submit = (event) => {
    event.preventDefault();
    this.props.history.push('/theUrlYouWantToGoTo');
  };

  render() {
    return (
      <form onSubmit={this.submit}>
        <input
          type="text"
          onChange={(event) => this.setState({ input: event.target.value })}
        />

        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default withRouter(Form);

to call this.props.history.push with '/theUrlYouWantToGoTo' to go to /theUrlYouWantToGoTo when the submit method is called.

We call withRouter with Form so that history is injected into the props of Form.

Conclusion

To navigate programmatically in React Router v4, we can use the this.props.history.push method.

Sometimes, we want to add multiple parameters with React Router.

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

How to add multiple parameters with React Router?

To add multiple parameters with React Router, we can get the URL parameters from the useParams hook.

For instance, we add

<Route path="/:category/:id" exact component={ItemDetails} />;

to add the category and id parameters to the Route.

Then we can get it from ItemDetails with

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

export default function ItemDetails(props) {
  const { id, category } = useParams();
  return (
    <div>
      {id}
      {category}
    </div>
  );
}

We call useParams to return an object with the id and category parameters.

Conclusion

To add multiple parameters with React Router, we can get the URL parameters from the useParams hook.