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

Encountering a problem while attempting to start Gulp

Successful execution occurring prior to beforeSend in a Cordova iOS application utilizing jQuery Ajax

Creating an Angular service that checks if data is available in local storage before calling an API method can be achieved by implementing a

Methods for organizing an array of objects by a specific key in JavaScript, but in the case of duplicate values, the objects can be sorted by a different

What is the reason for instanceof Map returning false?

The code snippets in the Vue3 documentation are quite peculiar

Show the ajax response on a separate page

Incorporate a JavaScript script into an Angular 9 application

Leveraging IE conditional comments for including CSS or JavaScript files can lead to an increase in the number of HTTP

Step-by-step guide on setting up a click counter that securely stores data in a text file, even after the

Exploring the benefits of utilizing useState and localStorage in Next.js with server-side

Encountering a 404 error when attempting to post from a Node.js express app to a

What steps can be taken to create an electron menu for easily conducting a general search within the current window?

How to convert an array of keys and an array of values into an array of objects using JavaScript

Show only specific items in an AngularJS application

What steps do I need to take to adjust this function based on the timezone?

Experiencing difficulties with arrays in JavaScript while using React Native

Connect individuals based on specific criteria within a nested array

Using jQuery each, the output is an undefined Object or HTMLElement

What are some strategies for increasing efficiency in my drag and drop process?