DEV Community

loading...

Navigating with Ant Design and Reach Router

mikewheaton profile image Mike Wheaton Originally published at wheaton.dev on ・2 min read

Ant Design is an open-source design system built with React. It provides a collection of well-designed, functional, and accessible components to kickstart your React project.

The Menu component is excellent for site-wide navigation, but it wasn't immediately clear how to make this work with Reach Router.

After some experimentation, I was able to get these working together:

<Location>
  {props => {
    return (
      <Menu selectedKeys={[props.location.pathname]}>
        <Menu.Item key="/courses">
          <Link to="/courses">Courses</Link>
        </Menu.Item>
        <Menu.Item key="/users">
          <Link to="/users">Users</Link>
        </Menu.Item>
        <Menu.Item key="/profile">
          <Link to="/profile">My Profile</Link>
        </Menu.Item>
      </Menu>
    );
  }}
</Location>

With Reach Router, any component that's a direct child of the router receives a location prop that describes the user's current location within the app.

In my case, the header navigation is a child of a page layout component. Rather than passing location through as a prop, I've used the Location component. This provides a child render prop that has access to the user's location.

Ant's Menu component takes any number of Menu.Item children. Each of these has a key to uniquely identify it, while the parent menu has selectedKeys prop which takes an array of items that should be selected.

By setting the key of each menu item to the corresponding path name, these can easily be matched up by passing the selectedKeys prop a single-element array containing props.location.pathname.

In short, Reach Router says "we're on /courses" and Ant's menu says "okay, I'll select the menu item with a key of /courses".

This would get more complex for paths with variables (e.g. /courses/abc123/edit) but for basic navigation, this does the trick.

Discussion (7)

pic
Editor guide
Collapse
lexiebkm profile image
Alexander B.K.

Initially I was interested in Antd for React, especially the menu and select component. I thought their team created those components by themselves not from 3rd party. But then I found that its menu component was actually rc-menu, a 3rd party component that I knew before. Although I have downloaded the rc-menu previously, I still postponed to use it, because I saw its original source code was 5 years ago.
Then I also found that its other components have names with initials rc-. I found these rc- components are taken from : github.com/react-component. I don't really know about these open-source projects.
I think that Antd team just collect those components from those projects and put into their project.
I don't know whether they have relation with those projects I mentioned.
Maybe you know about that and can explain, so I can be convinced to use the components, especially Menu and Select without hesitating the quality.

Collapse
mikewheaton profile image
Mike Wheaton Author

I wouldn't necessarily be concerned about a project using components from other open-source projects. The whole idea of open source is to share and reuse. And in this case it looks like the react-component repositories are specifically meant to serve as the foundation for Ant Design:

Collapse
lexiebkm profile image
Alexander B.K.

Thanks for reply. I know that react-component becomes foundation of Antd. But I want to compare it with similar UI component toolkits such as Bootstrap, Material-UI, Materialize and Foundation by Zurb. Bootstrap team created the main or the core of their components by themselves. They do take some of 3rd party libraries such as popper.js to support dropdown, popover and tooltips components.
Whereas Antd, a lot of the UI components (rc-) are taken from react-component repo. I guess, perhaps because some of developers that maintain react-component project are also team member or have relation to Antd team. Looking at who created the original of rc-menu, I can understand why.
Alright, this is actually not really a problem for me, as I am impressed with some its components, especially menu with submenu, select and layout.
Btw, why do you pick Reach-Router instead of React-Router which is more popular ?

Thread Thread
mikewheaton profile image
Mike Wheaton Author

I prefer the simplicity of Reach Router (you can see an overview of the differences here). But the good news is that React Router will soon be adopting the Reach Router API, as discussed here. So at this point they're largely the same and migrating from one to the other shouldn't take long.

Thread Thread
lexiebkm profile image
Alexander B.K.

Thanks for reply. I got it. I have read both links you gave. Actually, I only use React-Router for its basic usage, haven't dived deeper, because there are other things that need more attention from me, being a full-stack developer.
As explained in the link about the feature of React-Router and Reach Router, I think I can wait for the new release of React-Router which will adopt the goods from Reach Router as well as keeping or enhancing the goods from itself.
While waiting for the new release of React Router, I agree that Reach Router looks simple that it is worth for a try.

Collapse
dance2die profile image
Sung M. Kim

That's very nice clean way to handle the navigation

Collapse
jovvybersamin profile image
Jovvy Bersamin • Edited

How to handle complicated path like customers/:id/edit or customer/1/edit?