Category: React

Sometimes, we want to add a not found route with React Router.

In this article, we’ll look at how to add a not found route with React Router.

How to add a not found route with React Router?

To add a not found route with React Router, we can use the Switch component.

For instance, we write

<Switch>
  <Route path="/users" component={MyComponent} />
  <Route path="/404" component={GenericNotFound} />
  <Redirect to="/404" />
</Switch>

to wrap the Switch component around the Route components.

We add the Route with path /404 at the end so it’ll only be loaded when nothing else matches.

Also, we add a Redirect component to redirect to /404 if nothing else matches.

Conclusion

To add a not found route with React Router, we can use the Switch component.

Sometimes, we want to use Redirect in the new react-router-dom.

In this article, we’ll look at how to use Redirect in the new react-router-dom.

How to use Redirect in the new react-router-dom?

To use Redirect in the new react-router-dom, we can check if we want to redirect.

If we do, then we render the Redirect component.

For instance, we write

class MyComponent extends React.Component {
  state = {
    redirect: false,
  };

  handleSubmit = async () => {
    await axios.post(/**/);
    this.setState({ redirect: true });
  };

  render() {
    const { redirect } = this.state;
    if (redirect) {
      return <Redirect to="/somewhere" />;
    }
    return <RenderYourForm />;
  }
}

to create the handleSubmit function that sets the redirect state to true.

And if redirect is true, we return the Redirect component to redirect in the render method.

Conclusion

To use Redirect in the new react-router-dom, we can check if we want to redirect.

If we do, then we render the Redirect component.

Sometimes, we want to avoid rendering multiple routes with React Router v4.

In this article, we’ll look at how to avoid rendering multiple routes with React Router v4.

How to avoid rendering multiple routes with React Router v4?

To avoid rendering multiple routes with React Router v4, we can use the Switch component.

For instance, we write

import {Switch} from 'react-router';

//...
<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Login} />
    <Route path="/login" component={Login} />
    <Route path="404" component={NotFound} />
    <Route path="*" component={NotFound} />
  </Switch>
</BrowserRouter>

to wrap the Routes around the Switch component so that only one matched component is rendered at a time.

Conclusion

To avoid rendering multiple routes with React Router v4, we can use the Switch component.

Sometimes, we want to implement authenticated routes in React Router 4.

In this article, we’ll look at how to implement authenticated routes in React Router 4.

How to implement authenticated routes in React Router 4?

To implement authenticated routes in React Router 4, we can create a component that checks the auth status and render the content according to that.

We can wrap this component around our authenticated routes so that they only show when the user is logged in.

For instance, we write

RouteRequiresLogin.js

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

const RouteRequiresLogin = props => {
   const userIsLogged = useLoginStatus();

   return (
      <Route {...props}>{userIsLogged ? props.children : <LoginPage/>}</Route>
   );
};

export default RouteRequiresLogin;

to create the RouteRequiresLogin component that renders props.children is the user is authenticated which we check with userIsLogged .

If userIsLogged is false, we render the LoginPage component.

Then we can use it by writing

<>
  <RouteRequiresLogin path="/dashboard">
    <DashboardPage />
  </RouteRequiresLogin>
  <Route path="/sign-up">
    <SignUpPage />
  </Route>
</>;

to wrap the DashboardPage, which requires authentication, with RouteRequiresLogin.

The public SignUpPage route wraps around the React Router Route component.

Conclusion

To implement authenticated routes in React Router 4, we can create a component that checks the auth status and render the content according to that.

We can wrap this component around our authenticated routes so that they only show when the user is logged in.

To add an external link with React Router, we can set the to prop to an object with the pathname property set to the external URL we go to when the link is clicked.

For instance, we write

<Link to={{ pathname: "https://example.com" }} target="_blank" />

to set the to prop to { pathname: "https://example.com" } to go to https://example.com when we click on the link.

Also, we set target to _blank so that the link opens a new tab when we click it.