Forcing a React-Router <Link> to load a page, even if we're already on that page

react router redirect
react router-config
react router 4
react-router refresh
react-router navigation
react-router 404
react router tutorial
react router match

Is there a way to force a React-Router <Link> to load a page from path, even when the current location is already that page? I can't seem to find any mention of this in the react-router documentations.

We have a page on a route for "apply" that loads up a landing page with a hero image, some explanatory text, etc., and an "apply for this program" button that swaps in content that acts as an application form. This all happens on the same "apply" route, because users should not be able to directly navigate to this form without first hitting the landing page.

However, when they have this form open, and they click on the apply link in the nav menu again, the entire page should reload as it would on first mount, getting them "back" (but really, forward) to the landing page again.

Instead, clicking the <Link> does nothing, because react-router sees we're already on the "apply" page, and so does not unmount the current page to then mount a different one.

Is there a way to force it to unmount the current page before then mounting the requested page, even if it's for the page users are supposedly already on? (via a <Link> property for instance?)

A fix I used to solve my little need around this was to pass in a state property into link like so <Link to={{pathname: "/page", state: "desiredState"}}>Page</Link>. Then I can check for this in the target component's (say <Page />) componentWillReceiveProps like so:

componentWillReceiveProps(nextProps){
  if (nextProps.location.state === 'desiredState') {
    // do stuffs
  }
}

This can avoid the full page reload. Linked to my answer here

How to use react-router 4.0 to refresh current route? not reload the , If you force a route into the history react router will detect this and reload the route​. It is important to replace the empty route so that your back  React Router is a collection of navigational components that compose declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native , React Router works wherever React is rendering--so take your pick!

In the Route component, specify a random key.

<Route path={YOURPATH} render={(props) => <YourComp {...props} keyProp={someValue} key={randomGen()}/>} />

when react see a different key, they will trigger rerender.

how to reload a route? · Issue #1982 · ReactTraining/react-router , From ui-router docs: "reload - If true will force transition even if the state or params have not changed, aka a reload of the same state." For now I  import {Router, Route, IndexRoute} from 'react-router'; Browser History. History is a term that covers everything it takes to manage location, history and URL in React-Router. Up on till now, we have been dealing with an ugly URL. That is not the best React-Router can offer. React-Router offers three ways to manage URLs in React apps

Not a good solution because it forces a full page refresh and throws an error, but you can call forceUpdate() using an onClick handler like:

<Link onClick={this.forceUpdate} to={'/the-page'}>
    Click Me
</Link>

All I can say is it works. I'm stuck in a similar issue myself and hope someone else has a better answer!

React router Link not causing component to update within nested routes

Primary Components, import { BrowserRouter, Route, Link } from "react-router-dom"; Any time that you want to force navigation, you can render a <Redirect> . When a <Redirect>  There are multiple ways to force a React component render but they are essentially the same. The first is using this.forceUpdate() , which skips shouldComponentUpdate : someMethod() { // Force a render without state change

This might be a common problem and I was looking for a decent solution to have in my toolbet for next time. React-Router provides some mechanisms to know when an user tries to visit any page even the one they are already.

Reading the location.key hash, it's the perfect approach as it changes every-time the user try to navigate between any page.

componentDidUpdate (prevProps) {
    if (prevProps.location.key !== this.props.location.key) {
        this.setState({
            isFormSubmitted: false,
        })
    }
}

After setting a new state, the render method is called. In the example, I set the state to default values.

Reference: A location object is never mutated so you can use it in the lifecycle hooks to determine when navigation happens

React Router v5.1, In the case of the render prop, you can pass in custom props but you're forced to manually pass along the values you get from the callback to  React generally re-renders the component whenever the component state or props are changed and we see the updated UI. Forcing component to re-render React has a forceUpdate() method by using that we can force the react component to re-render. Let’s see an example.

I solved this by pushing a new route into history, then replacing that route with the current route (or the route you want to refresh). This will trigger react-router to "reload" the route without refreshing the entire page.

<Link onClick={this.reloadRoute()} to={'/route-to-refresh'}>
    Click Me
</Link>

let reloadRoute = () => {
    router.push({ pathname: '/empty' });
    router.replace({ pathname: '/route-to-refresh' });
}

React router works by using your browser history to navigate without reloading the entire page. If you force a route into the history react router will detect this and reload the route. It is important to replace the empty route so that your back button does not take you to the empty route after you push it in.

According to react-router it looks like the react router library does not support this functionality and probably never will, so you have to force the refresh in a hacky way.

How to force refresh on a route change in React Router? : reactjs, How to force refresh on a route change in React Router? My app pushes a version in a heartbeat to the clients. I'd like to make it so  If not, in my humble opinion this is a potential issue with how react-router is built, and here's why: in pure HTML if you click on a link pointing to the current page, the current page gets reloaded; with react-router it looks like a decision was made to not reload the current page, maybe for performance reasons or otherwise. This to me makes

REACT router re-render, getElementById('root'); ReactDOM.render( <Router Do I need one to force the re-render? React Router: Declarative Routing for React. Now with react-router v15.1 and onwards we can useHistory hook, This is super simple and clear way. Here is a simple example from the source blog.

Force a React Component to Re-Render, The beauty of React components is that they automagically render and update based on a change in state or props ; simply update the state  The power of React is giving up control of manually managing when something should render, and instead just concerning yourself with how something should map on inputs. Then supply stream of inputs. If you need to manually force re-render, you're almost certainly not doing something right. share.

Programmatically navigate with React Router, When building an app with React Router, eventually you'll run into the question of navigating programmatically. Because of the churn that  React router renders a component that it was configured to render for /react/route. Additionally, the setup may involve server-side rendering, index.html may contain rendered components or data that are specific to current route.

Comments
  • While I like the idea behind this, your answer is far from complete, and needs an explanation still of how to trigger a change to that key in a way that actually triggers a re-render as well.
  • Thanks, @Peiti Peter Li
  • i find this actually a great idea! easy to implement and works perfectly
  • I used Math.random to generate a key. Basically what's happening is when you click the link, react router evaluates your arrow function to get the component, and by passing a new key each time using random you ensure that each link click is treated as a prop change which react will rerender.
  • I was already passing a unique slug to my route component, so I just passed it as a key property as well and that fixed it. Thanks!
  • you probably want to comment on their answer so they can update it instead, given that the "willupdate" function was deprecated quite a few React release ago now.
  • Why would you post this when the accepted answer, from 2015, already says this. If you see a question with an accepted answer already, don't post the same answer, find a new question to answer.
  • This is specifically about what to do in the context of a codebase that uses, and relies on, <Link> components for navigation, server side generation, etc. "Just use something else" cannot be part of any answer.