Category: React

Sometimes, we want to set the correct path for img on React.js and JavaScript.

In this article, we’ll look at how to set the correct path for img on React.js and JavaScript.

How to set the correct path for img on React.js and JavaScript?

To set the correct path for img on React.js and JavaScript, we can import the image to get the right path.

For instance, we write

import logo from "./logo.png";

class Nav extends Component {
  render() {
    return <img src={logo} alt={"logo"} />;
  }
}

to import the logo.png with import.

And then we set the img element’s src attribute to logo to load the image.

This works with Create React app projects since it has the image loader built in that lets us import images with import.

Conclusion

To set the correct path for img on React.js and JavaScript, we can import the image to get the right path.

Sometimes, we want to use Redirect in React react-router-dom v5.

In this article, we’ll look at how to use Redirect in React react-router-dom v5.

How to use Redirect in React react-router-dom v5?

To use Redirect in React react-router-dom v5, we call history.push.

For instance, we write

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

function HomeButton() {
  const history = useHistory();

  const handleClick = () => {
    history.push("/home");
  };

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

to call the useHistory hook to return the history object.

Then we call history.push to go to the '/home' URL.

And then we set onClick prop to handleClick to do the redirect when we click the button.

Conclusion

To use Redirect in React react-router-dom v5, we call history.push.

Sometimes, we want to listen for state changes in React.

In this article, we’ll look at how to listen for state changes in React.

How to listen for state changes in React?

To listen for state changes in React, we use the useEffect hook.

For instance, we write

export function MyComponent(props) {
  const [myState, setMystate] = useState("initialState");

  useEffect(() => {
    console.log(myState);
  }, [myState]);
  //...
}

to create the MyComponent component.

In it, we define the myState state.

And we watch it for changes with

useEffect(() => {
  console.log(myState);
}, [myState]);

We call the useEffect hook with a callback that logs the latest value of myState.

And we use [myState] as the 2nd argument to watch myState for changes.

Conclusion

To listen for state changes in React, we use the useEffect hook.

Sometimes, we want to intercept and handle browser’s back button in React Router v6.

In this article, we’ll look at how to intercept and handle browser’s back button in React Router v6.

How to intercept and handle browser’s back button in React Router?

To intercept and handle browser’s back button in React Router, we can listen for changes in the history object with the navigation.listen method.

For instance, we write

import { BrowserHistory } from "history";
import React, { useContext } from "react";
import { UNSAFE_NavigationContext } from "react-router-dom";

export default function usePathname() {
  const [state, setState] = React.useState(window.location.pathname);

  const navigation = useContext(UNSAFE_NavigationContext)
    .navigator;
  React.useLayoutEffect(() => {
    if (navigation) {
      navigation.listen((locationListener) =>
        setState(locationListener.location.pathname)
      );
    }
  }, [navigation]);

  return state;
}

to create the usePathname hook to listen for for navigation with navigation.listen.

We call it with a callback to listen for navigation.

In it, we call setState with locationListener.location.pathname to save the latest URL we navigated to as the value of state.

Conclusion

To intercept and handle browser’s back button in React Router, we can listen for changes in the history object with the navigation.listen method.