Category: React

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.

Sometimes, we want to fix React Router not loading CSS for nested pages on refresh.

In this article, we’ll look at how to fix React Router not loading CSS for nested pages on refresh.

How to fix React Router not loading CSS for nested pages on refresh?

To fix React Router not loading CSS for nested pages on refresh, we should use absolute paths for the href attribute value of the link tag.

For instance, we write

<link rel="stylesheet" href="/style.css" />

to add a link tag with the absolute path /style.css as the value of href.

Conclusion

To fix React Router not loading CSS for nested pages on refresh, we should use absolute paths for the href attribute value of the link tag.