Author: John Au-Yeung

Sometimes, we want to add Link component from React Router with React Material UI tabs.

In this article, we’ll look at how to add Link component from React Router with React Material UI tabs.

How to add Link component from React Router with React Material UI tabs?

To add Link component from React Router with React Material UI tabs, we can set the containerElement prop of the Tab component.

For instance, we write

<Tabs onChange={this.changeTab} value={value}>
  <Tab value={0} label="first" containerElement={<Link to="/first" />} />
  <Tab value={1} label="second" containerElement={<Link to="/second" />} />
  <Tab value={2} label="third" containerElement={<Link to="/third" />} />
</Tabs>;

to set containerElement to render the Link component so that we can use the React Router Link component for navigation when we click on each tab.

Conclusion

To add Link component from React Router with React Material UI, we can set the containerElement prop of the Tab component.

Sometimes, we want to make React Bootstrap Navbar and React Router work together.

In this article, we’ll look at how to make React Bootstrap Navbar and React Router work together.

How to make React Bootstrap Navbar and React Router work together?

To make React Bootstrap Navbar and React Router work together, we can add the as prop to the Nav.Link component.

For instance, we write

<Nav defaultActiveKey="/bills" as="ul">
  <Nav.Item as="li">
    <Nav.Link as={NavLink} to="/bills">
      Bills
    </Nav.Link>
  </Nav.Item>
  <Nav.Item as="li">
    <Nav.Link as={NavLink} to="/other">
      Other
    </Nav.Link>
  </Nav.Item>
</Nav>

to render Nav.Libk as a React Router NavLink by setting the as prop to NavLink.

The to prop takes a URL path string just like the React Router to prop.

Conclusion

To make React Bootstrap Navbar and React Router work together, we can add the as prop to the Nav.Link component.

Sometimes, we want to restrict access to routes in React Router.

In this article, we’ll look at how to restrict access to routes in React Router.

How to restrict access to routes in React Router?

To restrict access to routes in React Router, we set the render prop to a function that renders the component we want according to the condition we’re checking.

For instance, we write

import { Route, Redirect } from "react-router";

<Route
  exact
  path="/"
  render={() => (loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />)}
/>;

to render Redirect if loggedIn is true.

Otherwise, we render PublicHomePage.

Conclusion

To restrict access to routes in React Router, we set the render prop to a function that renders the component we want according to the condition we’re checking.

To avoid ‘Function components cannot be given refs’ when using react-router-dom, we can use the React.forwardRef method.

For instance, we write

const MyLink = React.forwardRef((props, ref) => (
  <NavLink innerRef={ref} {...props} />
));

to call React.forwardRef with a callback that renders the NavLink component.

We pass in the ref into the NavLink component as the value of the innerRef prop.

And then we can assign the innerRef prop of a component inside NavLink to get the ref that we pass in as the value of the ref prop of MyLink.

Sometimes, we want to add nested routes in React Router v4.

In this article, we’ll look at how to add nested routes in React Router v4.

How to add nested routes in React Router v4?

To add nested routes in React Router v4, we can nest Route components in a Switch component.

For instance, we write

<div>
  <Route component={AppShell} />
  <Switch>
    <Route exact path="/" component={Login} />
    <Route path="/dashboard" component={Dashboard} />
    <Route component={NoMatch} />
  </Switch>
</div>

to put some Routes side the Switch component and put one Route above the Switch component.

Now they can all coexist without errors.

Conclusion

To add nested routes in React Router v4, we can nest Route components in a Switch component.