React router: Redirected on left-click but not on right-click - react-hooks

Question

The problem:
Clicking a link to /username from /profile, redirects to /profile. This is only wanted if /currentUser.username. When the same link is clicked from other endpoints, it does not redirect. Also, if right-clicking --> open in new tab, it does not redirect.
What is causing the redirect and how do I avoid it?
Explanation
/profile shows the currently logged in user's profile page and /username shows another user's profile. If the currently logged in user goes to /currentUser.username they will be redirected to /profile.
Both endpoints render the same <Profile /> component. The content depends on whether the current user is visitor or not.
React context API manages state for <Profile />.
Code
The context provider checks if current user is a visitor:
export const ProfileProvider = ({ children }) => {
const [visitor, setVisitor] = useState(null);
const { username } = useParams();
const user = useSelector(selectCurrentUser); // currentUser
console.log('username: ', username) // prints username in initial render.
console.log(visitor); // prints false in initial render. Why?
useEffect(() => {
console.log('useEffect visitor: ', visitor) // prints false in initial render.
setVisitor(username ? username !== user.username : false);
}, [username, user.username]);
// Omit code for brevity
};
In <Profile /> I Have:
export const Profile = () => {
const navigate = useNavigate();
const {username, visitor} = useContext(ProfileContext);
// navigate to ('/profile') if user is looking at their own profile.
useEffect(() => {
if (visitor === false && username) {
navigate('/profile');
}
}, [visitor, navigate, username]);
// Omit code for brevity
}
And the link is in the header, which can be clicked from any endpoint:
<Link to={`/${user.username}`}></Link>
Where user !== currentUser.
Log statements:
ProfileProvider.jsx:19 username: qqqqqq0.6122198309846412
ProfileProvider.jsx:20 visitor: false
ProfileProvider.jsx:38 useEffect visitor: false
ProfileProvider.jsx:19 username: qqqqqq0.6122198309846412
ProfileProvider.jsx:20 visitor: false
ProfileProvider.jsx:19 username: undefined
ProfileProvider.jsx:20 visitor: true
ProfileProvider.jsx:38 useEffect visitor: true
ProfileProvider.jsx:19 username: undefined
ProfileProvider.jsx:20 visitor: true
ProfileProvider.jsx:19 username: undefined
ProfileProvider.jsx:20 visitor: false
ProfileProvider.jsx:19 username: undefined
ProfileProvider.jsx:20 visitor: false
ProfileProvider.jsx:19 username: undefined
ProfileProvider.jsx:20 visitor: false
ProfileProvider.jsx:19 username: undefined
ProfileProvider.jsx:20 visitor: false
ProfileProvider.jsx:19 username: undefined
ProfileProvider.jsx:20 visitor: false
ProfileProvider.jsx:19 username: undefined
ProfileProvider.jsx:20 visitor: false
ProfileProvider.jsx:19 username: undefined
ProfileProvider.jsx:20 visitor: false
ProfileProvider.jsx:19 username: undefined
ProfileProvider.jsx:20 visitor: false
Edit: Rephrased the problem.

Answer 1

There are separate routes each rendering their own ProfileProvider, so navigating between them each has their own state and logic independent of the other.
If what you really want is for the Profile component to compare the current authenticated user's username against the username route path parameter then move the const { username } = useParams() logic from the ProfileProvider component into the Profile component.
Example:
App - Move the ProfileProvider to wrap the routes.
<ProfileProvider>
<Routes>
<Route path=":username/*" element={<Profile />} />
<Route path="profile/*" element={<Profile />} />
</Routes>
</ProfileProvider>
Profile
export const Profile = () => {
const navigate = useNavigate();
const { username: currentUser } = useContext(ProfileContext);
const { username } = useParams();
useEffect(() => {
if (currentUser === username) {
navigate("/profile", { replace: true });
}
}, [currentUser, navigate, username]);
const text = username ? username : "Current User";
return (
<>
<header>
<h1>Profile of:</h1>
</header>
<main>
<p>{text}</p>
</main>
</>
);
};