React Link to Wont Refresh Target Component

Dimas Maulana Development

19-01-2022

It appears that you are trying to use React Router to navigate to another component and pass state information to that component. However, you’ve noticed that the target component is not refreshing when you navigate to it. This behavior is actually by design in React Router. When you navigate to a route using <Link> or navigate, React Router typically does not unmount and remount the component by default. Instead, it updates the URL and re-renders the current component with the new route’s props and state.

If you want the target component to refresh when navigating, you can achieve this by using a combination of the key prop and a state management library like Redux or React’s built-in context and state management. Here’s how you can do it:

Create a Redux Store (Optional): If you’re not already using Redux or another state management library, you can set up Redux to manage your application’s state. If you prefer not to use Redux, you can use React’s built-in context and state management, but Redux provides a more structured way to manage global state.

Dispatch an Action When Navigating: When you navigate, dispatch an action that updates the Redux store or the context state. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// Redux example
import { useDispatch } from 'react-redux';
import { updateState } from './actions';

// Inside your component
const dispatch = useDispatch();

const handleNavigation = () => {
  dispatch(updateState({ from: 'Login' }));
  navigate('/');
};

Use the key Prop: In your target component, use the key prop to force it to remount when the state changes. You can set the key prop to a value that changes when the state updates. For example:

1
2
3
4
5
6
7
8
9


// Inside your target component
const location = useLocation();
const key = location.state.from; // Use a value that changes when the state changes

return (
  <div key={key}>
    {/* Your component content */}
  </div>
);

By setting a different key value when the state changes, React will treat the component as a new instance and remount it, causing it to refresh with the updated state.

This approach allows you to refresh the target component when navigating and passing state information to it. Depending on your project setup and preferences, you can choose between Redux or React’s built-in context and state management for managing the state that triggers the component refresh.