Author: John Au-Yeung

Sometimes, we want to make a React Material UI button act as a React Router Link.

In this article, we’ll look at how to make a React Material UI button act as a React Router Link.

How to make a React Material UI button act as a React Router Link?

To make a React Material UI button act as a React Router Link, we can set the component prop of the Material UI Button to a React Router Link.

For instance, we write

import Button from "@material-ui/core/Button";
import { Link } from "react-router-dom";

//...

<Button component={Link} to="/about" variant="contained" color="primary">
  About Page
</Button>

to set the Button‘s component prop to Link to render the button as a link with the to prop set as the to prop of the Link.

Conclusion

To make a React Material UI button act as a React Router Link, we can set the component prop of the Material UI Button to a React Router Link.

Sometimes, we want to redirect on login with React Router.

In this article, we’ll look at how to redirect on login with React Router.

How to redirect on login with React Router?

To redirect on login with React Router, we can render different components depending on the login status.

For instance, we write

import {
  BrowserRouter as Router,
  Route,
  Redirect,
  Switch,
} from "react-router-dom";

import Login from "./views/login";
import Supportedmodels from "./views/dashboard/supported-models";

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      localStorage.getItem("user") ? (
        <Component {...props} />
      ) : (
        <Redirect to={{ pathname: "/login" }} />
      )
    }
  />
);

function App() {
  return (
    <Router>
      <Switch>
        <PrivateRoute path="/" component={Supportedmodels} exact />
        <Route path="/login" component={Login} />
      </Switch>
    </Router>
  );
}

to add the PrivateRoute component that renders a Route component.

We set its render prop to a function that renders Component is the local storage with key user is present.

Otherwise, we render Redirect to redirect to the /login page.

And then we use PrivateRoute in the Switch component to render the Route inside.

Conclusion

To redirect on login with React Router, we can render different components depending on the login status.

Sometimes, we want to get URL parameters in component in React Router v4.

In this article, we’ll look at how to get URL parameters in component in React Router v4.

How to get URL parameters in component in React Router v4?

To get URL parameters in component in React Router v4, we can use the useParams hook.

For instance, we write

<Route path="/:id" children={<Child />} />

to add a Route with the children prop set to Child to render it if we go to /:id.

:id is the placeholder for the id route parameter.

Then in Child, we write

const { id } = useParams();

to call the useParams hook to return an object with the URL parameters.

And we can get the value of the :id with id.

Conclusion

To get URL parameters in component in React Router v4, we can use the useParams hook.

Sometimes, we want to check if a React Router path is active.

In this article, we’ll look at how to check if a React Router path is active.

How to check if a React Router path is active?

To check if a React Router path is active, we can use the matchPath function.

For instance, we write

import { matchPath } from "react-router";

const match = matchPath("/users/123", {
  path: "/users/:id",
  exact: true,
  strict: false,
});

to call matchPath with a URL and an object with the URL properties from the location object.

It returns true if it matches and false otherwise.

Conclusion

To check if a React Router path is active, we can use the matchPath function.

Sometimes, we want to fix the ‘Warning: Failed propType: Invalid prop component supplied to Route‘ error with React Router.

In this article, we’ll look at how to fix the ‘Warning: Failed propType: Invalid prop component supplied to Route‘ error with React Router.

How to fix the ‘Warning: Failed propType: Invalid prop component supplied to Route‘ error with React Router?

To fix the ‘Warning: Failed propType: Invalid prop component supplied to Route‘ error with React Router, we should replace the component prop with the render prop and set that to a function that renders the component we want.

For instance, we write

<Route path="/dashboard" render={(props) => <Dashboard {...props} />} />;

to add a Route component with the render prop set to a function that renders the Dashboard component with the props spread into it.

Conclusion

To fix the ‘Warning: Failed propType: Invalid prop component supplied to Route‘ error with React Router, we should replace the component prop with the render prop and set that to a function that renders the component we want.