web-dev-qa-db-ja.com

react-router 4.0を使用して現在のルートを更新する方法は？ページ全体をリロードしない

'react-router-dom'には更新機能 here がありますが、このメソッドの呼び出し方法がわからず、 適切にフォーマットされたドキュメント はこれを説明することを気にしません。

window.location.reload（）は、アプリストアも消去するため、機能しません。一部のデータを変更した後、更新されたデータでルートをリロードする必要があります。

私もこれを読みました： https://github.com/ReactTraining/react-router/issues/1982https ：//github.com/ReactTraining/react-router/issues/2243

このスレッドは私の質問を正確に議論しています： https://github.com/ReactTraining/react-router/issues/4056

そして、それを行う方法はまだ不明です。この基本的な機能はそれほど大きな労力を必要とするべきではありませんが、膨大な労力を費やした後、現在のルートをリロードできません。

ここに私のコードがあります：

@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

これを解決するには、新しいルートを履歴にプッシュし、そのルートを現在のルート（または更新するルート）に置き換えます。これにより、react-routerがトリガーされ、ページ全体を更新せずにルートが「リロード」されます。

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

Reactルーターは、ブラウザーの履歴を使用して、ページ全体をリロードすることなくナビゲートします。履歴にルートを強制すると、ルーターはこれを検出し、ルートをリロードします。空のルートを置き換えて、プッシュボタンを押した後に戻るボタンが空のルートに移動しないようにすることが重要です。

react-router によると、react routerライブラリはこの機能をサポートしておらず、おそらくサポートしないようです。そのため、ハッキング方法でリフレッシュを強制する必要があります。

4
Zach Taylor

私は同じ問題を抱えており、リフレッシュがどのように行われるのか分かりません。私の解決策は、次の2つのステップを実行することです。

  1. 歴史への新しい道を押し進める
  2. すべての状態をリセット

その後、DOMはルートとともに再レンダリングします。

1
Kwun Yeung

次に、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

これだけが私のために働いた：

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

答えは前のものと似ていますが、setTimeout関数を追加して機能させる必要がありました。私の場合、/dashboardページにいる場合は、ロゴをクリックして現在のURLを更新する必要がありました。最初に、追加のルート/reload（名前はあなた次第）に進み、すぐに戻ります。ページは1秒未満で白くなり、データがリロードされて表示されます。ブラウザでのリロードは行われず、SPAのままです。

0
Alexey Kutalo

この小さなトリックを使用できます。歴史の新しい道を history.Push（ '/ temp'） すぐに呼び出します history.goBack（）

ここに例：

履歴を作成して、ルーターに渡します。

import { createBrowserHistory } from "history";

export const appHistory = createBrowserHistory();

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

次に、アプリのどこかで履歴を変更します。

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

この方法で、ルートは同じままになり、更新されます。

0
Alberto Piras