Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
Vue Answers

How to fix Vue.js computed properties not working with arrow functions?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to fix Vue.js computed properties not working with arrow functions.

In this article, we’ll look at how to fix Vue.js computed properties not working with arrow functions.

How to fix Vue.js computed properties not working with arrow functions?

To fix Vue.js computed properties not working with arrow functions, we should replace arrow functions with regular functions so that this is set to the Vue component.

For instance, we write

export default {
  //...
  computed: {
    switchRYellow() {
      return { red: this.turnYellow };
    },
    switchGreen() {
      return { green: this.turnGreen };
    },
    switchBlue() {
      return { blue: this.turnBlue };
    },
  },
  //...
};

to add the switchRYellow, switchGreen and switchBlue computed properties to regular functions.

Then we use properties from this where this is the current Vue component instance.

this.turnYellow, this.turnGreen and this.turnBlue are reactive properties.

Conclusion

To fix Vue.js computed properties not working with arrow functions, we should replace arrow functions with regular functions so that this is set to the Vue component.

Categories
React Answers

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

closeup photo of yellow Labrador retriever puppy

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.

Categories
React Answers

How to redirect in React Router v6?

yellow Labrador puppy on floor

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.

Categories
React Answers

How to redirect on click with React Router?

closeup photo of yellow Labrador retriever puppy

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.

Categories
React Answers

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

closeup photo of yellow Labrador retriever puppy

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.