Category: React Answers

Sometimes, we want to redirect in React Router v6.

In this article, we’ll look at how to redirect in React Router v6.

How to redirect in React Router v6?

To redirect in React Router v6, we can use the navigate function.

For instance, we write

import { useNavigate } from "react-router-dom";
const Comp = () => {
  const navigate = useNavigate();

  useEffect(() => {
    if (loggedIn) {
      return navigate("/");
    }
  }, [loggedIn]);

  //...
};

to call the useNavigate function to return the navigate function.

Then we call navigate with the URL we want to navigate to.

Conclusion

To redirect in React Router v6, we can use the navigate function.

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

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

How to redirect on click with React Router?

To redirect on click with React Router, we can use the useHistory hook and the push method.

For instance, we write

import { useHistory } from "react-router-dom";

const MyComponent = (props) => {
  const history = useHistory();

  const handleOnSubmit = () => {
    history.push(`/dashboard`);
  };
  //...
};

to call the useHistory hook to return the history object.

Then we call history.push with the URL we want to go to in the handleSubmit function to do the navigation.

Conclusion

To redirect on click with React Router, we can use the useHistory hook and the push method.

Sometimes, we want to use a Material UI button navigation with React Router.

In this article, we’ll look at how to use a Material UI button navigation with React Router.

How to use a Material UI button navigation with React Router?

To use a Material UI button navigation with React Router, we can set the component prop of the BottomNavigationAction component to Link.

For instance, we write

import { Link } from "react-router-dom";

import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";

// ...

<BottomNavigation value={value} onChange={handleChange}>
  <BottomNavigationAction
    component={Link}
    to="/foo"
    label="foo"
    value="foo"
    icon={<ShowChart />}
    className={classes.content}
  />
</BottomNavigation>

to set the component prop of the BottomNavigationAction component to Link.

The to prop of the BottomNavigationAction would be used as the to prop value of the Link.

Conclusion

To use a Material UI button navigation with React Router, we can set the component prop of the BottomNavigationAction component to Link.

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.