Navigating with Reach Router only updates the URL, not the component being rendered

Question

Navigating with Reach Router only updates the URL, not the component being rendered

Is there a way to programmatically navigate using Reach Router in React? I have noticed that when updating the URL, the route does not render. Even though the URL changes, the original component remains displayed according to the React developer tools.

However, upon refreshing the page at the new URL, the correct route is rendered.

How can I ensure that the new route is rendered without having to refresh?

Below is a simplified example of my code implementation, utilizing @reach/router (note that I am also using Redux):


import React from 'react';

import { navigate } from '@reach/router';

const ExampleComponent = props => {
  navigate('/a/different/url');

  return <div />;
};

export default ExampleComponent;

javascript reach-router

Answer 1

Answer №1

I encountered a similar issue while dealing with a <NotFound defualt /> route component.

Although this altered the URL, React itself remained unchanged:

import React from "react";
import { RouteComponentProps, navigate } from "@reach/router";

interface INotFoundProps extends RouteComponentProps {}

export const NotFound: React.FC<INotFoundProps> = props => {
  // Interestingly, neither of the following approaches worked as expected
  if (props.navigate !== undefined) {
    props.navigate("/");
  }
  // ...nor...
  navigate("/", { replace: true });

  return null;
};

However, by implementing the following approach, I was able to modify the URL and display the new route efficiently:

...
export const NotFound: React.FC<INotFoundProps> = props => {
  React.useEffect(() => {
    navigate("/", { replace: true });
  }, []);

  return null;
};

Answer 2

I encountered a similar issue while dealing with a <NotFound defualt /> route component.

Although this altered the URL, React itself remained unchanged:

import React from "react";
import { RouteComponentProps, navigate } from "@reach/router";

interface INotFoundProps extends RouteComponentProps {}

export const NotFound: React.FC<INotFoundProps> = props => {
  // Interestingly, neither of the following approaches worked as expected
  if (props.navigate !== undefined) {
    props.navigate("/");
  }
  // ...nor...
  navigate("/", { replace: true });

  return null;
};

However, by implementing the following approach, I was able to modify the URL and display the new route efficiently:

...
export const NotFound: React.FC<INotFoundProps> = props => {
  React.useEffect(() => {
    navigate("/", { replace: true });
  }, []);

  return null;
};

Answer 3

Answer №2

Is it possible that you are integrating @reach/router with redux-first-history? I encountered a similar problem and was able to resolve it by configuring my historyContext as follows:

import { globalHistory } from "@reach/router";
// other imports

const historyContext = createReduxHistoryContext({
   // your options...
   reachGlobalHistory: globalHistory // This particular option is crucial in resolving the issue
}

For more information, refer to the README of redux-first-history

Answer 4

Is it possible that you are integrating @reach/router with redux-first-history? I encountered a similar problem and was able to resolve it by configuring my historyContext as follows:

import { globalHistory } from "@reach/router";
// other imports

const historyContext = createReduxHistoryContext({
   // your options...
   reachGlobalHistory: globalHistory // This particular option is crucial in resolving the issue
}

For more information, refer to the README of redux-first-history

Answer 5

Answer №3

When I first started playing around with Reach Router, I encountered the same issue. Fortunately, I was able to find a solution fairly quickly.

According to the Reach Router documentation for navigate, it states that:

Navigate returns a promise that can be awaited. It resolves after React has completely finished rendering the next screen, even with React Suspense.

Therefore, using await navigate() worked for me.

import React, {useEffect} from 'react';
import {useStoreState} from "easy-peasy";
import {useNavigate} from "@reach/router";

export default function Home() {
    const {isAuthenticated} = useStoreState(state => state.auth)
    const navigate = useNavigate()

    useEffect(()=> {
        async function navigateToLogin() {
            await navigate('login')
        }
        if (!isAuthenticated) {
            navigateToLogin()
        }
    },[navigate,isAuthenticated])

    return <div>Home page</div>;
}

Answer 6

When I first started playing around with Reach Router, I encountered the same issue. Fortunately, I was able to find a solution fairly quickly.

According to the Reach Router documentation for navigate, it states that:

Navigate returns a promise that can be awaited. It resolves after React has completely finished rendering the next screen, even with React Suspense.

Therefore, using await navigate() worked for me.

import React, {useEffect} from 'react';
import {useStoreState} from "easy-peasy";
import {useNavigate} from "@reach/router";

export default function Home() {
    const {isAuthenticated} = useStoreState(state => state.auth)
    const navigate = useNavigate()

    useEffect(()=> {
        async function navigateToLogin() {
            await navigate('login')
        }
        if (!isAuthenticated) {
            navigateToLogin()
        }
    },[navigate,isAuthenticated])

    return <div>Home page</div>;
}

Answer 7

Answer №4

To resolve the issue, simply delete the <React.StrictMode> tag from your code.

Answer 8

To resolve the issue, simply delete the <React.StrictMode> tag from your code.

Answer 9

Answer №5

If you're looking for a solution, consider utilizing gatsby navigate with reach-router. It effectively resolved the issue I was facing.

import { navigate } from 'gatsby'

Answer 10

If you're looking for a solution, consider utilizing gatsby navigate with reach-router. It effectively resolved the issue I was facing.

import { navigate } from 'gatsby'

Navigating with Reach Router only updates the URL, not the component being rendered

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How can you attach a d3 graphic to a table that was created automatically?

"What is the best way to use JavaScript to dynamically modify the hover color of a button

Having difficulty modifying the values of my input types on the edit page

Present intricate JSON data using only one ng-repeat in AngularJS

Why is it that PowerShell cannot execute Angular commands?

Adding variables and appending using jQuery

Ways to have Express display a randomly selected question from my personal JSON file

What is the best way to detect component errors on the server with Angular Universal?

Can a single controller function in ASP.NET MVC4 be used to send back two arrays to the view?

How to extract IDs from a URL in Angular

Nested Promises in Angular's $q Library

Selenium Tips: Ensuring RemoteDriver Remains Connected to the Active Browser Tab

What is the default way to toggle content in rows using Material UI?

Fixing Bugs in Checkbox Functionality using useState in Reactjs when implementing Material UI

Move the cache folder for NextJS to a new location

Utilizing .env Variables in NestJS Main App Module for Establishing Database Connection

When you access the `selectedIndex` property in JavaScript, it will return an object of type `HTMLSelect

Animating scrollTop using jQuery is a useful feature for creating

Steps for clearing a set of checkboxes when a different checkbox is selected

Establishing the Time-to-Live (TTL) with Redis-OM and Node Object Mapping