Refresh current route in react-router

[paveleremin]

Is it posible to refresh current route in react-router by pressing the same url? For example, in angularjs with ngroute you can write href="/dasboard/" instead of href="/dashboard". With ui-route it work out of the box. And what about react with react-router?
I.e. I want that the dashboard can be refresh by click at the top menu(user repeat the click at the active menu element and the page refresh)

<Link to="dashboard" refresh="true">

something like that

[mjackson]

It's just React. If you want a component to re-render in React, you set some state. So if you want one of your route components to re-render, use setState.

[paveleremin]

@mjackson actually I'm talking about whole page, not component. So I need to write custom link class, i.e.:

class CustomLink extend Link {}

and check

if (currentRoute == route) refreshHandler();

something like that?
Can you provide some example how to implement this, please?
Also why react-router not refresh whole Handler if I press at current url? Is it ok?

[dmitry]

@paveleremin I think you have to change state on the root component, once you will do that - you will see an updated route. That's the right way of doing things in react.

[tianyingchun]

it's easy, you can cutomized RouteLink capture the link state and attach onClick event to Link,

if (this.props.refresh === true) window.location.href ='xxxx';
// the sample code as below

import React from 'react';
import { Link, History } from 'react-router';
import URI from '../../utils/URI';
const RouteLink = React.createClass({
  mixins:[History],

  getDefaultProps() {
    return {
      refresh: false
    }
  },
  getPropTypes() {
    return {
      // for refresh page, the whole page reload.
      refresh: React.PropTypes.bool,
      // cutomized regex match to test if current RouteLink is `active` state.
      match: React.PropTypes.string
    };
  },

  handLinkClick (e) {
    if (this.props.refresh === true) {
      window.location.href = e.target.href;
    }
  },

  render () {
    // Note there is an bug in ie <=11, this.history is undefined.
    // the mixin has some problem in windows <IE10 use ES5 instead.
    let { to, match } = this.props;
    let isActive;
    let currentURL = window.location.href;
    let currentHash = currentURL.replace(URI.getUrl(), '/');

    if (match) {
      let regExpStr = match.replace(/\//g,'\/');
      isActive = new RegExp(regExpStr).test(currentHash);
    } else {
      isActive = this.history.isActive(to, this.props.query);
    }

    let className = isActive ? 'active' : '';
    return (
      <li className={className}><Link onClick={this.handLinkClick.bind(this)} {...this.props} activeClassName={null} /></li>
    );
  }
});

module.exports = RouteLink;

the example in your components:

<RouteLink refresh={true} match="^\/(docs\/|docs)?$" activeClassName="active" to="/docs">RUI Docs</RouteLink>

[tianyingchun]

BTW, i don't know if react-router has provider this functionality feature, maybe it also have support this requirement, if support please let me know thanks.