Category: React Answers

Sometimes, we want to set activeClassName for wrapper element of Link or IndexLink in React Router.

In this article, we’ll look at how to set activeClassName for wrapper element of Link or IndexLink in React Router.

How to set activeClassName for wrapper element of Link or IndexLink in React Router?

To set activeClassName for wrapper element of Link or IndexLink in React Router, we can set the className prop of our wrapper element.

For instance, we write

import React, { PropTypes } from "react";
import { Route, Link } from "react-router-dom";
import styles from "./styles.less";

export default function NavItem({ children, to, exact }) {
  return (
    <Route
      path={to}
      exact={exact}
      children={({ match }) => (
        <li className={match ? styles.activeRoute : null}>
          <Link to={to}>{children}</Link>
        </li>
      )}
    />
  );
}

to set the li‘s className prop to the class we want.

And we wrap that around the Link so the li will be rendered as the parent of the anchor rendered by the Link.

Conclusion

To set activeClassName for wrapper element of Link or IndexLink in React Router, we can set the className prop of our wrapper element.

Sometimes, we want to fix the "A Router may have only one child element" error with React Router.

In this article, we’ll look at how to fix the "A Router may have only one child element" error with React Router.

How to fix the "A Router may have only one child element" error with React Router?

To fix the "A Router may have only one child element" error with React Router, we should wrap our components within the Router component with a wrapper component.

For instance, we write

<Router>
  <div>
    <Route exact path="/" component={BaseLayer} />
    <Route path="/editor" component={App} store={store} />
  </div>
</Router>

to wrap a div around the Route components so that the error goes away.

Conclusion

To fix the "A Router may have only one child element" error with React Router, we should wrap our components within the Router component with a wrapper component.

Sometimes, we want to use multiple layouts with React Router v4.

In this article, we’ll look at how to use multiple layouts with React Router v4.

How to use multiple layouts with React Router v4?

To use multiple layouts with React Router v4, we just wrap our layout component around the routes.

For instance, we write

const Pages = () => {
  return (
    <ReactRouter>
      <Switch>
        <Route path="/comingsoon" component={ComingSoon} exact />
        <Route>
          <MainLayout>
            <Switch>
              <Route path="/home" exact>
                <Home />
              </Route>
              <Route path="/login" exact>
                <Login />
              </Route>
              <Route path="/useraccount" exact>
                <UserAccount />
              </Route>
            </Switch>
          </MainLayout>
        </Route>
      </Switch>
    </ReactRouter>
  );
};

to wrap MainLayout around some Route components.

Then the layout in Mainlayout would be applied to the components inside, which includes Home , Login, and UserAccount.

Conclusion

To use multiple layouts with React Router v4, we just wrap our layout component around the routes.

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.