web-dev-qa-db-ja.com

ReactJS Router V4 history.Pushが機能しない

React Router V4にアップグレードしましたが、現在はhistory.Push 方法。

Index.jsファイルがあります。

import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Route } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

import { Main} from "./components/Main";
import { About } from "./components/About";
import { Cars} from "./components/Cars";


class App extends React.Component {

render() {
    return (
        <BrowserRouter history={history}>

            <div>
                <Route path={"/"} component={Main} />
                <Route path={"/cars"} component={Cars}/>
                <Route path={"/about"} component={About}/>
            </div>
        </BrowserRouter>
    )
  }
}

render(<App/>, window.document.getElementById("app"));

次に、別のファイルがあります。このファイルには、次のような特定のページに戻るための簡単なものが追加されています。

import React from "react";
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

export class Cars extends React.Component {
  navigateBack() {
    history.Push('/')
  }

  render() {
    return(
        <div>
            <h3>Overview of Cars</h3>
            <p>Model: </p>
            <button onClick={this.navigateBack} className="btn btn-primary">Back</button>
        </div>
    )
  }
}

だから、私はここで何が間違っているのか理解できません。ボタンをクリックすると、URLが/しかしそれだけです。手伝ってくれる人はいますか？

[〜＃〜] edit [〜＃〜]

私はこれを行うと動作することを発見しました：

this.props.history.Push('/home')

そして

<button onClick={this.onNavigateHome.bind(this)}

しかし、それはどういうわけか間違っているようですか??

私がする時

this.context.history.Push('/home')

Cannot read property 'context' of null しかし、なぜ？？私の<BrowserRouter>セットアップが間違っている??

とにかく、助けてくれてありがとう:)

reactjsreact-routerreact-router-v4
16
ST80

_{withRouter} from 'react-router-dom'_をインポートし、この方法でクラスをエクスポートする必要があります

export default withRouter(Cars)

8
Steven Daniel Anderson

V4では、this.context.history.Push('/cart');を使用する必要があります
詳細については、これらの投稿をご覧ください。

React Router v4？）で履歴にプッシュする方法

BrowserRouterを使用すると、history.Pushが機能しない

1
paul

ForceRefresh = {true}をBrowserRouterに追加してみてください。

<BrowserRouter forceRefresh={true}>
0
Novia Lim

これは私のために働いた：

routes.js

import React from 'react';
import { Route, Switch, Redirect } from 'react-router';
import { BrowserRouter } from 'react-router-dom';

const routes = (
  <div>
    <BrowserRouter>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/home" component={Logged} />
      </Switch>
    </BrowserRouter>
  </div>
);

Login.js

componentWillReceiveProps = nextProps => {
    const { signedIn, history } = this.props;
    if (signedIn !== nextProps.signedIn && nextProps.signedIn) {
      history.Push('/home');
    }
  };
export default withRouter(connect(mapStateToProps)(Login));

そして今、それはレンダリングされます！それが誰かを助けることを願って

0
Catalina