Category: React

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.

Sometimes, we want to tell Webpack dev server to serve index.html for any route.

In this article, we’ll look at how to tell Webpack dev server to serve index.html for any route.

How to tell Webpack dev server to serve index.html for any route?

To tell Webpack dev server to serve index.html for any route, we can set the historyApiFallback.index property to 'index.html'.

For instance, we write

devServer: {
  port: 3000,
  historyApiFallback: {
    index: 'index.html'
  }
}

to set the historyApiFallback.index property to 'index.html' to make the Webpack dev server serve index.html for any route.

Conclusion

To tell Webpack dev server to serve index.html for any route, we can set the historyApiFallback.index property to 'index.html'.