Category: React

Sometimes, we want to fix the "’react-router’ does not contain an export named ‘browserHistory’" error with React Router.

In this article, we’ll look at how to fix the "’react-router’ does not contain an export named ‘browserHistory’" error with React Router.

How to fix the "’react-router’ does not contain an export named ‘browserHistory’" error with React Router?

To fix the "’react-router’ does not contain an export named ‘browserHistory’" error with React Router, we should call the createBrowserHistory function.

For instance, we write

import { createBrowserHistory } from 'history'

to import createBrowserHistory.

And then we can call it and use the returned history object elsewhere.

Conclusion

To fix the "’react-router’ does not contain an export named ‘browserHistory’" error with React Router, we should call the createBrowserHistory function.

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.