PROSAGA码农传奇-React-如何在React Router v4中推送到历史记录？

0# 逆转的风 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    我能够通过使用来实现这一目标
     <code>
      bind()
    </code>
    。我想点击一个按钮
     <code>
      index.jsx
    </code>
    ，将一些数据发布到服务器，评估响应，然后重定向到
     <code>
      success.jsx
    </code>
    。这就是我如何解决这个问题的方法......
  </p>
  <P>
     <code>
      index.jsx
    </code>
    ：
  </p>
   <pre>
    <code>
      import React, { Component } from "react"
import { postData } from "../../scripts/request"

class Main extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
        this.postData = postData.bind(this)
    }

handleClick() {
        const data = {
            "first_name": "Test",
            "last_name": "Guy",
            "email": "test@test.com"
        }

this.postData("person", data)
    }

render() {
        return (
            <div className="Main">
                <button onClick={this.handleClick}>Test Post</button>
            </div>
        )
    }
}

export default Main

</code>
  </pre>
  <P>
     <code>
      request.js
    </code>
    ：
  </p>
   <pre>
    <code>
      import { post } from "./fetch"

export const postData = function(url, data) {
    // post is a fetch() in another script...
    post(url, data)
        .then((result) => {
            if (result.status === "ok") {
                this.props.history.push("/success")
            }
        })
}

</code>
  </pre>
  <P>
     <code>
      success.jsx
    </code>
    ：
  </p>
   <pre>
    <code>
      import React from "react"

const Success = () => {
    return (
        <div className="Success">
            Hey cool, got it.
        </div>
    )
}

export default Success

</code>
  </pre>
  <P>
    所以通过绑定
     <code>
      this
    </code>
     至
     <code>
      postData
    </code>
     在
     <code>
      index.jsx
    </code>
    ，我能够访问
     <code>
      this.props.history
    </code>
     在
     <code>
      request.js
    </code>
    ...然后我可以在不同的组件中重用此功能，只需要确保我记得包含
     <code>
      this.postData = postData.bind(this)
    </code>
     在里面
     <code>
      constructor()
    </code>
    。
  </p>
</DIV>

1# 你抱着孩子@先跑 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    我提供了一个解决方案，以防其他人有价值。
  </p>
  <P>
    我有一个
     <code>
      history.js
    </code>
     文件我有以下内容：
  </p>
   <pre>
    <code>
      import createHistory from 'history/createBrowserHistory'
const history = createHistory()
history.pushLater = (...args) => setImmediate(() => history.push(...args))
export default history

</code>
  </pre>
  <P>
    接下来，在我定义路由器的Root上，我使用以下内容：
  </p>
   <pre>
    <code>
      import history from '../history'
import { Provider } from 'react-redux'
import { Router, Route, Switch } from 'react-router-dom'

export default class Root extends React.Component {
  render() {
    return (
     <Provider store={store}>
      <Router history={history}>
       <Switch>
        ...
       </Switch>
      </Router>
     </Provider>
    )
   }
  }

</code>
  </pre>
  <P>
    最后，在我的
     <code>
      actions.js
    </code>
     我导入历史记录并使用pushLater
  </p>
   <pre>
    <code>
      import history from './history'
export const login = createAction(
...
history.pushLater({ pathname: PATH_REDIRECT_LOGIN })
...)

</code>
  </pre>
  <P>
    这样，我可以在API调用后推送到新的操作。
  </p>
  <P>
    希望能帮助到你！
  </p>
</DIV>

2# 小蚊子 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    React Router v4与v3（及更早版本）根本不同，你做不到
     <code>
      browserHistory.push()
    </code>
     就像你以前一样。
  </p>
  <P>
    <a href="https://github.com/ReactTraining/react-router/issues/4059" rel="noreferrer">
      这个讨论
    </A>
     如果你想要更多的信息似乎相关：
  </p>
  <BLOCKQUOTE>
    <UL>
      <LI>
        创建一个新的
         <code>
          browserHistory
        </code>
         不会工作，因为
         <code>
          <BrowserRouter>
        </code>
         创建自己的历史记录实例，并监听其中的更改。因此，不同的实例将更改URL但不更新
         <code>
          <BrowserRouter>
        </code>
        。
      </LI>
      <LI>
         <code>
          browserHistory
        </code>
         在v4中，反应路由器不会公开，仅在v2中。
      </LI>
    </UL>
  </BLOCKQUOTE>
  <HR />
  <P>
    相反，您有几个选项可以做到这一点：
  </p>
  <UL>
    <LI>
      <H3>
        使用
         <code>
          withRouter
        </code>
         高阶分量
      </H3>
      <P>
        相反，你应该使用
         <code>
          withRouter
        </code>
         高阶组件，并将其包装到将推送到历史记录的组件。例如：
      </p>
       <pre class="lang-js prettyprint-override">
        <code>
          import React from "react";
import { withRouter } from "react-router-dom";

class MyComponent extends React.Component {
  ...
  myFunction() {
    this.props.history.push("/some/Path");
  }
  ...
}
export default withRouter(MyComponent);

</code>
      </pre>
      <P>
        看看
        <a href="https://reacttraining.com/react-router/web/api/withRouter" rel="noreferrer">
          的<strong>
            官方文件
          </强>
        </A>
         了解更多信息：
      </p>
      <BLOCKQUOTE>
        <P>
          你可以访问
          <a href="https://reacttraining.com/react-router/web/api/history" rel="noreferrer">
             <code>
              history
            </code>
          </A>
           对象的属性和最接近的
          <a href="https://reacttraining.com/react-router/web/api/Route" rel="noreferrer">
             <code>
              <Route>
            </code>
          </A>
          的
          <a href="https://reacttraining.com/react-router/web/api/match" rel="noreferrer">
             <code>
              match
            </code>
          </A>
           通过withRouter高阶组件。 withRouter将在每次路径更改时使用相同的道具重新渲染其组件
          <a href="https://reacttraining.com/react-router/web/api/Route" rel="noreferrer">
             <code>
              <Route>
            </code>
          </A>
           渲染道具：
           <code>
            { match, location, history }
          </code>
          。
        </p>
      </BLOCKQUOTE>
    </LI>
  </UL>
  <HR />
  <UL>
    <LI>
      <H3>
        使用
         <code>
          context
        </code>
         API
      </H3>
      <P>
        使用上下文可能是最简单的解决方案之一，但作为实验性API，它不稳定且不受支持。仅在其他一切都失败时使用它。这是一个例子：
      </p>
       <pre class="lang-js prettyprint-override">
        <code>
          import React from "react";
import PropTypes from "prop-types";

class MyComponent extends React.Component {
  static contextTypes = {
    router: PropTypes.object
  }
  constructor(props, context) {
     super(props, context);
  }
  ...
  myFunction() {
    this.context.router.history.push("/some/Path");
  }
  ...
}

</code>
      </pre>
      <P>
        看看吧
        <a href="https://reactjs.org/docs/context.html" rel="noreferrer">
          的<strong>
            官方文件
          </强>
        </A>
         在上下文中：
      </p>
      <BLOCKQUOTE>
        <P>
          如果您希望应用程序稳定，请不要使用上下文。它是一个实验性的API，很可能会在未来的React版本中破解。
        </p>
        <P>
          如果您坚持使用上下文尽管存在这些警告，请尝试将上下文的使用隔离到一个小区域，并尽可能避免在可能的情况下直接使用上下文API，以便在API更改时更容易升级。
        </p>
      </BLOCKQUOTE>
    </LI>
  </UL>
</DIV>

3# 红蜻蜓 | 2019-08-31 10-32

4# 扬尘 | 2019-08-31 10-32

5# 满目山河 | 2019-08-31 10-32

6# 明天会更好 | 2019-08-31 10-32

7# 你瞎啊！撞我心了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    第一步将您的应用程序包装在路由器
  </p>
   <pre>
    <code>
      import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

</code>
  </pre>
  <P>
    现在我的整个应用程序都可以访问BrowserRouter。第二步我导入Route然后传递那些道具。可能在你的一个主要文件中。
  </p>
   <pre>
    <code>
      import { Route } from "react-router-dom";

//lots of code here

//somewhere in my render function

</code>
  </pre>
  <P>
    现在如果我在我的组件js文件中运行console.log（this.props），我应该得到一些看起来像这样的东西
  </p>
   <pre>
    <code>
      {match: {鈥, location: {鈥, history: {鈥, //other stuff }

</code>
  </pre>
  <P>
    第2步我可以访问历史对象来更改我的位置
  </p>
   <pre>
    <code>
      //lots of code here relating to my whatever request I just ran delete, put so on

this.props.history.push("/") // then put in whatever url you want to go to

</code>
  </pre>
  <P>
    另外我只是一名编码训练营学生，所以我不是专家，但我知道你也可以使用
  </p>
   <pre>
    <code>
      window.location = "/" //wherever you want to go

</code>
  </pre>
  <P>
    如果我错了，请纠正我，但是当我测试它时，它重新加载整个页面，我认为打败了使用React的整个过程。
  </p>
</DIV>

8# Coolkid | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    根据
    <a href="https://reacttraining.com/react-router/core/guides/redux-integration/deep-integration" rel="noreferrer">
      React Router v4文档 -  Redux Deep Integration会话
    </A>
  </p>
  <P>
    需要深度整合：
  </p>
  <BLOCKQUOTE>
    <P>
      “能够通过调度行动导航”
    </p>
  </BLOCKQUOTE>
  <P>
    但是，他们建议这种方法作为“深度整合”的替代方案：
  </p>
  <BLOCKQUOTE>
    <P>
      “而不是分派行动进行导航，您可以将提供的历史记录对象传递给您的行为并在那里进行导航。”
    </p>
  </BLOCKQUOTE>
  <P>
    因此，您可以使用withRouter高阶组件包装组件：
  </p>
  <P>
     <code>
      export default withRouter(connect(null, { actionCreatorName })(ReactComponent));
    </code>
  </p>
  <P>
    这会将历史API传递给道具。所以你可以调用动作创建者将历史作为参数传递。例如，在ReactComponent中：
  </p>
   <pre>
    <code>
      onClick={() => {
  this.props.actionCreatorName(
    this.props.history,
    otherParams
  );
}}

</code>
  </pre>
  <P>
    然后，在你的actions / index.js里面：
  </p>
   <pre>
    <code>
      export function actionCreatorName(history, param) {
  return dispatch => {
    dispatch({
      type: SOME_ACTION,
      payload: param.data
    });
    history.push("/path");
  };
}

</code>
  </pre>
</DIV>

9# 张三岁 | 2019-08-31 10-32

10# afs-loliaholic | 2019-08-31 10-32

11# v-star*위위 | 2019-08-31 10-32

12# 镜乃Kagamino | 2019-08-31 10-32