web-dev-qa-db-fra.com

Comment utiliser react-router 4.0 pour rafraîchir la route actuelle? ne pas recharger toute la page

'react-router-dom' a une fonction de rafraîchissement ici , mais je ne sais pas comment appeler cette méthode, aussi leur document bien formaté ne prend pas la peine d'expliquer cela .

window.location.reload () ne fonctionne pas pour moi, car il efface également l'App Store. J'ai modifié certaines données, puis je dois recharger l'itinéraire avec des données mises à jour.

J'ai également lu ceci: https://github.com/ReactTraining/react-router/issues/1982https://github.com/ReactTraining/react-router/issues/224

ce fil discute exactement de ma question: https://github.com/ReactTraining/react-router/issues/4056

et je ne sais toujours pas comment le faire. Cette fonction de base ne devrait pas nécessiter trop d'efforts, mais après avoir dépensé énormément d'efforts, je ne peux pas recharger l'itinéraire actuel.

voici mon code:

@inject('store') @observer
export default class PasswordInput extends Component {
    constructor (props) {
        super(props)
        this.setPwd = this.setPwd.bind(this)
        this.submit = this.submit.bind(this)
    }

    componentWillMount() {
        this.case = this.props.store.case

        this.setState({refresh: false})
    }
    setPwd(e) {
        // console.log(e)
        this.case.pwd = e.target.value

    }
    submit() {
        console.log(this.props.caseId)
        this.setState({refresh: true})

    }

    render() {
        return (
            <Container>
                <div>{this.state.refresh}</div>
                { (this.state.refresh) && <Redirect refresh={true} to={'/cases/' + this.props.caseId}></Redirect>}
                <br />
                <Grid columns="three">
                    <Grid.Row>
                        <Grid.Column key={2}>
                            <Form>
                                <label>Enter Password</label>
                                <input placeholder="empty"  type="text" onChange={this.setPwd} value={this.case.pwd}></input>                               

                                <Button name="Save" color="green" size="mini" 
                                style={{marginTop:'1em'}}
                                onClick={this.submit}>
                                    Submit
                                </Button>                               
                            </Form>
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </Container>
        )
    }
}
reactjsreact-routerreact-router-v4
11
Nicolas S.Xu

J'ai résolu ce problème en poussant un nouvel itinéraire dans l'historique, puis en remplaçant cet itinéraire par l'itinéraire actuel (ou l'itinéraire que vous souhaitez actualiser). Cela déclenchera react-router pour "recharger" l'itinéraire sans rafraîchir la page entière.

if (routesEqual && forceRefresh) {
    router.Push({ pathname: "/empty" });
    router.replace({ pathname: "/route-to-refresh" });
}

Le routeur React fonctionne en utilisant l'historique de votre navigateur pour naviguer sans recharger la page entière. Si vous forcez un itinéraire dans l'historique, le routeur de réaction le détectera et rechargera l'itinéraire. Il est important de remplacer l'itinéraire vide afin que votre bouton de retour ne vous amène pas à l'itinéraire vide après l'avoir enfoncé.

Selon react-router il semble que la bibliothèque de routeurs react ne supporte pas cette fonctionnalité et ne le fera probablement jamais, donc vous devez forcer le rafraîchissement de manière hacky.

4
Zach Taylor

J'ai le même problème et je n'ai aucune idée de la façon dont le rafraîchissement se produit. Ma solution est de suivre deux étapes.

  1. Poussez un nouveau chemin vers l'histoire
  2. réinitialiser tous les états

Le DOM se rendra ensuite avec votre itinéraire.

1
Kwun Yeung

Voici ma solution avec "Redirect" de react-router-dom:

<Route key={props.notifications.key} path={props.notifications.path} exact render={() => <Redirect to={props.notifications.path + "/update"}/>}/>
<Route key={props.notifications.key + "/update"} path={props.notifications.path + "/update"} exact render={() => <props.notifications.component apis={props.notifications.apis}/>}/>
0
Dapeng

Seulement cela a fonctionné pour moi:

reloadOrNavigate = () => {
  const { history, location } = this.props;
  if (location.pathname === '/dashboard') {
    history.replace(`/reload`);
    setTimeout(() => {
      history.replace(`/dashboard`);
    });
  } else {
    history.Push('/dashboard');
  }
};

La réponse est similaire à la précédente mais j'avais besoin d'ajouter la fonction setTimeout pour la faire fonctionner. Dans mon cas, j'ai dû actualiser l'URL actuelle en cliquant sur le logo si je suis sur le /dashboard page. Tout d'abord, il passe à la route supplémentaire /reload (à vous de décider), puis revient immédiatement. La page devient blanche pendant moins d'une seconde et apparaît avec les données rechargées. Aucun rechargement dans le navigateur ne se produit, c'est toujours du SPA qui est bon.

0
Alexey Kutalo

Vous pouvez utiliser ce petit truc. Poussez un nouveau chemin dans l'histoire comme history.Push ('/ temp') et appeler immédiatement le history.goBack ()

Voici l'exemple:

Créez un historique et transmettez-le au routeur:

import { createBrowserHistory } from "history";

export const appHistory = createBrowserHistory();

<Router history={appHistory}>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

puis quelque part dans votre application, modifiez l'historique:

appHistory.Push('/temp');
appHistory.goBack();

De cette façon, l'itinéraire "restera" le même et sera rafraîchi.

0
Alberto Piras