blocks|key|4374944|text|我已经测试v4几天了.到目前为止，我喜欢它！只是过了一段时间就明白了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4374945|我也有同样的问题，我发现像下面这样处理它效果最好(甚至可能是它的意图)。它使用状态、三元运算符和<Redirect>。|offset|length|style|CODE|4374946|在构造函数()中|4374947|this.state+=+{
++++redirectTo:+null
}+
this.clickhandler+=+this.clickhandler.bind(this);|code-block|syntax|javascript|4374948|在render()|4374949|render(){
++++return+(
++++++++<div>
++++++++{+this.state.redirectTo+?
++++++++++++<Redirect+to={{+pathname:+this.state.redirectTo+}}+/>+:+
++++++++++++(
+++++++++++++<div>
+++++++++++++++..
+++++++++++++<button+onClick={+this.clickhandler+}+/>
++++++++++++++..
+++++++++++++</div>
+++++++++++++)
+++++++++}|4374950|在clickhandler()中|4374951|+this.setState({+redirectTo:+'/path/some/where'+});|4374952|希望能有所帮助。让我知道。|4374953|entityMap^0|0|1C|A|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

<p>I've been testing v4 for a few days now and .. I'm loving it so far! It just makes sense after a while.</p>

<p>I also had the same question and I found handling it like the following worked best (and might even be how it is intended). It uses state, a ternary operator and <code>&lt;Redirect&gt;</code>.</p>

<p>In the constructor()</p>

<pre><code>this.state = {
    redirectTo: null
} 
this.clickhandler = this.clickhandler.bind(this);
</code></pre>

<p>In the render() </p>

<pre><code>render(){
    return (
        &lt;div&gt;
        { this.state.redirectTo ?
            &lt;Redirect to={{ pathname: this.state.redirectTo }} /&gt; : 
            (
             &lt;div&gt;
               ..
             &lt;button onClick={ this.clickhandler } /&gt;
              ..
             &lt;/div&gt;
             )
         }
</code></pre>

<p>In the clickhandler()</p>

<pre><code> this.setState({ redirectTo: '/path/some/where' });
</code></pre>

<p>Hope it helps. Let me know.</p>


blocks|key|4375427|text|您还可以简单地使用props来访问历史对象：this.props.history.push('new_url')|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4375428|entityMap^0|M|Y|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>You can also simply use props to access history object: <code>this.props.history.push('new_url')</code></p>


blocks|key|4375459|text|因为有时我更喜欢通过应用程序切换路由，而不是通过按钮，这是一个对我有效的最小工作示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4375460|import+{+Component+}+from+'react'
import+{+BrowserRouter+as+Router,+Link+}+from+'react-router-dom'

class+App+extends+Component+{
++constructor(props)+{
++++super(props)

++++/**+@type+BrowserRouter+*/
++++this.router+=+undefined
++}

++async+handleSignFormSubmit()+{
++++await+magic()
++++this.router.history.push('/')
++}

++render()+{
++++return+(
++++++<Router+ref={+el+=>+this.router+=+el+}>
++++++++<Link+to="/signin">Sign+in</Link>
++++++++<Route+path="/signin"+exact={true}+render={()+=>+(
++++++++++<SignPage+onFormSubmit={+this.handleSignFormSubmit+}+/>
++++++++)}+/>
++++++</Router>
++++)
++}
}|code-block|syntax|javascript|4375461|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>As sometimes I prefer to switch routes by Application then by buttons, this is a minimal working example what works for me:</p>

<pre><code>import { Component } from 'react'
import { BrowserRouter as Router, Link } from 'react-router-dom'

class App extends Component {
  constructor(props) {
    super(props)

    /** @type BrowserRouter */
    this.router = undefined
  }

  async handleSignFormSubmit() {
    await magic()
    this.router.history.push('/')
  }

  render() {
    return (
      &lt;Router ref={ el =&gt; this.router = el }&gt;
        &lt;Link to="/signin"&gt;Sign in&lt;/Link&gt;
        &lt;Route path="/signin" exact={true} render={() =&gt; (
          &lt;SignPage onFormSubmit={ this.handleSignFormSubmit } /&gt;
        )} /&gt;
      &lt;/Router&gt;
    )
  }
}
</code></pre>


blocks|key|4375518|text|我的答案类似于Alex's。我不确定为什么React-Router会让事情变得如此不必要地复杂。为什么我必须用HoC包装我的组件，才能访问本质上是全局的？|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4375519|无论如何，如果你看看他们是如何实现的，它只是一个围绕history的小包装器。|4375520|我们可以将该历史位提取出来，以便从任何地方导入它。然而，诀窍是，如果您正在进行服务器端呈现，并且您尝试import历史记录模块，它将不会工作，因为它使用仅限浏览器的API。但这没问题，因为我们通常只在响应单击或其他客户端事件时进行重定向。因此，伪造它可能是可以的：|style|CODE|4375521|//+history.js
if(__SERVER__)+{
++++module.exports+=+{};
}+else+{
++++module.exports+=+require('history').createBrowserHistory();
}|code-block|syntax|javascript|4375522|在webpack的帮助下，我们可以定义一些var，这样我们就可以知道我们所处的环境：|4375523|plugins:+[
++++new+DefinePlugin({
++++++++'__SERVER__':+'false',
++++++++'__BROWSER__':+'true',+//+you+really+only+need+one+of+these,+but+I+like+to+have+both
++++}),|4375524|现在你可以|4375525|import+history+from+'./history';|4375526|从任何地方。它只会在服务器上返回一个空模块。|4375527|如果你不想使用这些神奇的变量，你只需要在需要的地方(在你的事件处理程序中)在全局对象中使用require。import不会工作，因为它只在顶层工作。|4375528|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/42320249/65387|1|https://www.npmjs.com/package/history^0|7|6|0|0|Q|7|1|0|1F|6|0|0|0|0|0|0|0|19|7|1H|6|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|D|3|E|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|F|3|G|5|6|7|1I|8|@$A|1J|B|1K|H|I]]|9|@]|C|$]]|$1|J|3|K|5|L|7|1L|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1M|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1N|8|@]|9|@]|C|$M|N]]|$1|S|3|T|5|6|7|1O|8|@]|9|@]|C|$]]|$1|U|3|V|5|L|7|1P|8|@]|9|@]|C|$M|N]]|$1|W|3|X|5|6|7|1Q|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|6|7|1R|8|@$A|1S|B|1T|H|I]|$A|1U|B|1V|H|I]]|9|@]|C|$]]|$1|10|3|-4|5|6|7|1W|8|@]|9|@]|C|$]]]|11|$12|$5|13|14|15|C|$16|17]]|18|$5|13|14|15|C|$16|19]]]]

<p>My answer is similar to <a href="https://stackoverflow.com/a/42320249/65387">Alex's</a>. I'm not sure why React-Router made this so needlessly complicated. Why should I have to wrap my component with a HoC just to get access to what's essentially a global? </p>

<p>Anyway, if you take a look at how they implemented <a href="https://github.com/ReactTraining/react-router/blob/d601722f8515eea3910bb3a69313f3f2fc37df16/packages/react-router-dom/modules/BrowserRouter.js" rel="noreferrer"><code>&lt;BrowserRouter&gt;</code></a>, it's just a tiny wrapper around <a href="https://www.npmjs.com/package/history" rel="noreferrer">history</a>.</p>

<p>We can pull that history bit out so that we can import it from anywhere. The trick, however, is if you're doing server-side rendering and you try to <code>import</code> the history module, it won't work because it uses browser-only APIs. But that's OK because we usually only redirect in response to a click or some other client-side event. Thus it's probably OK to fake it:</p>

<pre><code>// history.js
if(__SERVER__) {
    module.exports = {};
} else {
    module.exports = require('history').createBrowserHistory();
}
</code></pre>

<p>With the help of webpack, we can define some vars so we know what environment we're in:</p>

<pre><code>plugins: [
    new DefinePlugin({
        '__SERVER__': 'false',
        '__BROWSER__': 'true', // you really only need one of these, but I like to have both
    }),
</code></pre>

<p>And now you can</p>

<pre><code>import history from './history';
</code></pre>

<p>From anywhere. It'll just return an empty module on the server.</p>

<p>If you don't want use these magic vars, you'll just have to <code>require</code> in the global object where it's needed (inside your event handler). <code>import</code> won't work because it only works at the top-level.</p>


blocks|key|4375607|text|我为此挣扎了一段时间--如此简单，但又如此复杂，因为ReactJS是一种完全不同的编写web应用程序的方式，它对我们这些年长的人来说非常陌生！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4375608|我创建了一个单独的组件来将混乱抽象化：|4375609|//+LinkButton.js

import+React+from+"react";
import+PropTypes+from+"prop-types";
import+{Route}+from+'react-router-dom';

export+default+class+LinkButton+extends+React.Component+{

++++render()+{
++++++++return+(
++++++++++++<Route+render={({history})+=>+(
++++++++++++++++<button+{...this.props}
+++++++++++++++++++++++onClick={()+=>+{
+++++++++++++++++++++++++++history.push(this.props.to)
+++++++++++++++++++++++}}>
++++++++++++++++++++{this.props.children}
++++++++++++++++</button>
++++++++++++)}/>
++++++++);
++++}
}

LinkButton.propTypes+=+{
++++to:+PropTypes.string.isRequired
};|code-block|syntax|javascript|4375610|然后将其添加到您的render()方法：|offset|length|style|CODE|4375611|<LinkButton+className="btn+btn-primary"+to="/location">
++++Button+Text
</LinkButton>|4375612|entityMap^0|0|0|0|9|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>I struggled with this for a while - something so simple, yet so complicated, because ReactJS is just a completely different way of writing web applications, it's very alien to us older folk!</p>

<p>I created a separate component to abstract the mess away:</p>

<pre><code>// LinkButton.js

import React from "react";
import PropTypes from "prop-types";
import {Route} from 'react-router-dom';

export default class LinkButton extends React.Component {

    render() {
        return (
            &lt;Route render={({history}) =&gt; (
                &lt;button {...this.props}
                       onClick={() =&gt; {
                           history.push(this.props.to)
                       }}&gt;
                    {this.props.children}
                &lt;/button&gt;
            )}/&gt;
        );
    }
}

LinkButton.propTypes = {
    to: PropTypes.string.isRequired
};
</code></pre>

<p>Then add it to your <code>render()</code> method:</p>

<pre><code>&lt;LinkButton className="btn btn-primary" to="/location"&gt;
    Button Text
&lt;/LinkButton&gt;
</code></pre>


blocks|key|4375222|text|由于没有其他方法来处理这种可怕的设计，因此我编写了一个使用withRouter+HOC方法的通用组件。下面的示例包装了一个button元素，但您可以更改为所需的任何可单击元素：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4375223|import+React+from+'react';
import+PropTypes+from+'prop-types';
import+{+withRouter+}+from+'react-router-dom';

const+NavButton+=+(props)+=>+(
++<Button+onClick={()+=>+props.history.push(props.to)}>
++++{props.children}
++</Button>
);

NavButton.propTypes+=+{
++history:+PropTypes.shape({
++++push:+PropTypes.func.isRequired
++}),
++to:+PropTypes.string.isRequired
};

export+default+withRouter(NavButton);|code-block|syntax|javascript|4375224|用法：|4375225|<NavButton+to="/somewhere">Click+me</NavButton>|4375226|entityMap|0|LINK|mutability|MUTABLE|url|https://facebook.github.io/react/docs/higher-order-components.html^0|T|A|1P|6|14|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>Since there's no other way to deal with this horrible design, I wrote a generic component that uses the <code>withRouter</code> <a href="https://facebook.github.io/react/docs/higher-order-components.html" rel="nofollow noreferrer">HOC</a> approach. The example below is wrapping a <code>button</code> element, but you can change to any clickable element you need:</p>

<pre><code>import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';

const NavButton = (props) =&gt; (
  &lt;Button onClick={() =&gt; props.history.push(props.to)}&gt;
    {props.children}
  &lt;/Button&gt;
);

NavButton.propTypes = {
  history: PropTypes.shape({
    push: PropTypes.func.isRequired
  }),
  to: PropTypes.string.isRequired
};

export default withRouter(NavButton);
</code></pre>

<p>Usage:</p>

<pre><code>&lt;NavButton to="/somewhere"&gt;Click me&lt;/NavButton&gt;
</code></pre>


blocks|key|4375705|text|步骤1:上面只有一件事要导入：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4375706|import+{Route}+from+'react-router-dom';|code-block|syntax|javascript|4375707|步骤2:在你的路由中，传递历史记录：|4375708|<Route
++exact
++path='/posts/add'
++render={({history})+=>+(
++++<PostAdd+history={history}+/>
++)}
/>|4375709|步骤3:在下一个组件中，历史记录被接受为属性的一部分，因此您可以简单地：|4375710|this.props.history.push('/');|4375711|这很简单，而且非常强大。|4375712|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Step 1: There is only one thing to import on top: </p>

<pre><code>import {Route} from 'react-router-dom';
</code></pre>

<p>Step 2: In your Route, pass the history:</p>

<pre><code>&lt;Route
  exact
  path='/posts/add'
  render={({history}) =&gt; (
    &lt;PostAdd history={history} /&gt;
  )}
/&gt;
</code></pre>

<p>Step 3: history gets accepted as part of props in the next Component, so you can simply:  </p>

<pre><code>this.props.history.push('/');
</code></pre>

<p>That was easy and really powerful.</p>


blocks|key|4375266|text|这是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4375267|import+{+withRouter+}+from+'react-router-dom';

const+SomeComponent+=+withRouter(({+history+})+=>+(
++++<div+onClick={()+=>+history.push('/path/some/where')}>
++++++++some+clickable+element
++++</div>);+
);

export+default+SomeComponent;|code-block|syntax|javascript|4375268|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This works:</p>

<pre><code>import { withRouter } from 'react-router-dom';

const SomeComponent = withRouter(({ history }) =&gt; (
    &lt;div onClick={() =&gt; history.push('/path/some/where')}&gt;
        some clickable element
    &lt;/div&gt;); 
);

export default SomeComponent;
</code></pre>


blocks|key|4375811|text|我认为@rgommezz涵盖了大多数情况，除了一个我认为非常重要的情况。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4375812|//+history+is+already+a+dependency+or+React+Router,+but+if+don't+have+it+then+try+npm+install+save-dev+history

import+createHistory+from+"history/createBrowserHistory"

//+in+your+function+then+call+add+the+below+
const+history+=+createHistory();
//+Use+push,+replace,+and+go+to+navigate+around.
history.push("/home");|code-block|syntax|javascript|4375813|这让我可以编写一个简单的服务，其中包含动作/调用，我可以调用这些动作/调用来从任何我想要的组件进行导航，而不需要对我的组件进行大量的HoC操作……|4375814|目前还不清楚为什么以前没有人提供这种解决方案。我希望这对你有所帮助，如果你发现它有任何问题，请让我知道。|4375815|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I think that @rgommezz covers most of the cases minus one that I think it's quite important. </p>

<pre><code>// history is already a dependency or React Router, but if don't have it then try npm install save-dev history

import createHistory from "history/createBrowserHistory"

// in your function then call add the below 
const history = createHistory();
// Use push, replace, and go to navigate around.
history.push("/home");
</code></pre>

<p>This allows me to write a simple service with actions/calls that I can call to do the navigation from any component I want without doing a lot HoC on my components... </p>

<p>It is not clear why nobody has provided this solution before. I hope it helps, and if you see any issue with it please let me know.</p>


blocks|key|4375895|text|对于那些在使用React+Router或React+Router+Dom完全初始化路由器之前需要重定向的人，您可以通过简单地访问历史对象并在您的app.js构造中将新状态推送到它上来提供重定向。请考虑以下几点：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4375896|function+getSubdomain(hostname)+{
++++let+regexParse+=+new+RegExp('[a-z\-0-9]{2,63}\.[a-z\.]{2,5}$');
++++let+urlParts+=+regexParse.exec(hostname);
++++return+hostname.replace(urlParts[0],+'').slice(0,+-1);
}

class+App+extends+Component+{

++++constructor(props)+{
++++++++super(props);


++++++++this.state+=+{
++++++++++++hostState:+true
++++++++};

++++++++if+(getSubdomain(window.location.hostname).length+>+0)+{
++++++++++++this.state.hostState+=+false;
++++++++++++window.history.pushState('',+'',+'./login');
++++++++}+else+{
++++++++++++console.log(getSubdomain(window.location.hostname));
++++++++}

++++}


++++render()+{
++++++++return+(

++++++++++++<BrowserRouter>
++++++++++++++++{this.state.hostState+?+(
++++++++++++++++++++<div>
++++++++++++++++++++++++<Route+path="/login"+component={LoginContainer}/>
++++++++++++++++++++++++<Route+path="/"+component={PublicContainer}/>
++++++++++++++++++++</div>
++++++++++++++++)+:+(
++++++++++++++++++++<div>
++++++++++++++++++++++++<Route+path="/login"+component={LoginContainer}/>
++++++++++++++++++++</div>
++++++++++++++++)

++++++++++++++++}
++++++++++++</BrowserRouter>)
++++}


}|code-block|syntax|javascript|4375897|在这里，我们想要更改依赖于子域的输出路由，通过在组件呈现之前与历史对象进行交互，我们可以有效地重定向，同时仍然保持路由的灵活性。|4375898|window.history.pushState('',+'',+'./login');|4375899|entityMap^0|7|C|K|G|20|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<p>For those of you who require to redirect before fully initalizing a router using <code>React Router</code> or <code>React Router Dom</code> You can provide a redirect by simply accesing the history object and pushing a new state onto it within your constructur of <code>app.js</code>.  Consider the following:</p>

<pre><code>function getSubdomain(hostname) {
    let regexParse = new RegExp('[a-z\-0-9]{2,63}\.[a-z\.]{2,5}$');
    let urlParts = regexParse.exec(hostname);
    return hostname.replace(urlParts[0], '').slice(0, -1);
}

class App extends Component {

    constructor(props) {
        super(props);


        this.state = {
            hostState: true
        };

        if (getSubdomain(window.location.hostname).length &gt; 0) {
            this.state.hostState = false;
            window.history.pushState('', '', './login');
        } else {
            console.log(getSubdomain(window.location.hostname));
        }

    }


    render() {
        return (

            &lt;BrowserRouter&gt;
                {this.state.hostState ? (
                    &lt;div&gt;
                        &lt;Route path="/login" component={LoginContainer}/&gt;
                        &lt;Route path="/" component={PublicContainer}/&gt;
                    &lt;/div&gt;
                ) : (
                    &lt;div&gt;
                        &lt;Route path="/login" component={LoginContainer}/&gt;
                    &lt;/div&gt;
                )

                }
            &lt;/BrowserRouter&gt;)
    }


}
</code></pre>

<p>Here we want to change the output Routes dependant on a subdomain, by interacting with the history object before the component renders we can effectively redirect while still leaving our routes in tact.</p>

<pre><code>window.history.pushState('', '', './login');
</code></pre>


blocks|key|4375954|text|如果使用的是函数组件，则使用useHistory挂钩|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4375955|您可以使用useHistory钩子来获取history实例。|4375956|import+{+useHistory+}+from+"react-router-dom";

const+MyComponent+=+()+=>+{
++const+history+=+useHistory();
++
++return+(
++++<button+onClick={()+=>+history.push("/about")}>
++++++Click+me
++++</button>
++);
}|code-block|syntax|javascript|4375957|useHistory钩子允许您访问可用于导航的历史记录实例。|4375958|在页面组件中使用history属性|4375959|React+Router向页面组件注入了一些属性，包括history。|4375960|class+HomePage+extends+React.Component+{
++render()+{
++++const+{+history+}+=+this.props;

++++return+(
++++++<div>
++++++++<button+onClick={()+=>+history.push("/projects")}>
++++++++++Projects
++++++++</button>
++++++</div>
++++);
++}
}|4375961|包装子组件withRouter以注入路由器属性|4375962|withRouter包装器将路由器属性注入组件。例如，您可以使用此包装器注入放置在用户菜单中的注销按钮组件。|4375963|import+{+withRouter+}+from+"react-router";

const+LogoutButton+=+withRouter(({+history+})+=>+{
++return+(
++++<button+onClick={()+=>+history.push("/login")}>
++++++Logout
++++</button>
++);
});

export+default+LogoutButton;|4375964|entityMap|0|LINK|mutability|MUTABLE|url|https://reacttraining.com/react-router/web/api/Hooks/usehistory|1|https://reacttraining.com/react-router/core/api/withRouter^0|E|A|0|5|A|K|7|5|A|0|0|0|0|A|0|8|7|0|R|7|0|0|5|A|5|A|1|0|0|A|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|H|3|I|5|J|7|1L|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1P|8|@$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1S|8|@$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|S|3|T|5|J|7|1V|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1W|8|@$9|1X|A|1Y|B|C]]|D|@$9|1Z|A|20|1|21]]|E|$]]|$1|W|3|X|5|6|7|22|8|@$9|23|A|24|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|J|7|25|8|@]|D|@]|E|$K|L]]|$1|10|3|-4|5|6|7|26|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]|18|$5|13|14|15|E|$16|19]]]]

<h1>Use <code>useHistory</code> hook if you're using function components</h1>
<p>You can use <a href="https://reacttraining.com/react-router/web/api/Hooks/usehistory" rel="noreferrer"><code>useHistory</code></a> hook to get <code>history</code> instance.</p>
<pre><code>import { useHistory } from &quot;react-router-dom&quot;;

const MyComponent = () =&gt; {
  const history = useHistory();
  
  return (
    &lt;button onClick={() =&gt; history.push(&quot;/about&quot;)}&gt;
      Click me
    &lt;/button&gt;
  );
}
</code></pre>
<p>The <code>useHistory</code> hook gives you access to the history instance that you may use to navigate.</p>
<h1>Use <code>history</code> property inside page components</h1>
<p>React Router injects some properties including <code>history</code> to page components.</p>
<pre><code>class HomePage extends React.Component {
  render() {
    const { history } = this.props;

    return (
      &lt;div&gt;
        &lt;button onClick={() =&gt; history.push(&quot;/projects&quot;)}&gt;
          Projects
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>
<h1>Wrap child components <a href="https://reacttraining.com/react-router/core/api/withRouter" rel="noreferrer"><code>withRouter</code></a> to inject router properties</h1>
<p><code>withRouter</code> wrapper injects router properties to components. For example you can use this wrapper to inject router to logout button component placed inside user menu.</p>
<pre><code>import { withRouter } from &quot;react-router&quot;;

const LogoutButton = withRouter(({ history }) =&gt; {
  return (
    &lt;button onClick={() =&gt; history.push(&quot;/login&quot;)}&gt;
      Logout
    &lt;/button&gt;
  );
});

export default LogoutButton;
</code></pre>


blocks|key|4375558|text|this.props.history.push("/url")|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4375559|如果您在您的组件中没有找到可用的this.props.history，那么可以尝试这样做|unstyled|4375560|import+{withRouter}+from+'react-router-dom'
export+default+withRouter(MyComponent)++|4375561|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>this.props.history.push("/url")
</code></pre>

<p>If you have not found this.props.history available in your component , 
then try this </p>

<pre><code>import {withRouter} from 'react-router-dom'
export default withRouter(MyComponent)  
</code></pre>


blocks|key|4375583|text|您可以通过此方式有条件地导航|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4375584|import+{+useHistory+}+from+"react-router-dom";

function+HomeButton()+{
++const+history+=+useHistory();

++function+handleClick()+{
++++history.push("/path/some/where");
++}

++return+(
++++<button+type="button"+onClick={handleClick}>
++++++Go+home
++++</button>
++);
}|code-block|syntax|javascript|4375585|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can navigate conditionally by this way</p>
<pre><code>import { useHistory } from &quot;react-router-dom&quot;;

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push(&quot;/path/some/where&quot;);
  }

  return (
    &lt;button type=&quot;button&quot; onClick={handleClick}&gt;
      Go home
    &lt;/button&gt;
  );
}
</code></pre>


<p>I have just replaced <code>react-router</code> from v3 to v4.<br>
But I am not sure how to programmatically navigate in the member function of a <code>Component</code>.
i.e in <code>handleClick()</code> function I want to navigate to <code>/path/some/where</code> after processing some data.
I used to do that by:</p>

<pre class="lang-js prettyprint-override"><code>import { browserHistory } from 'react-router'
browserHistory.push('/path/some/where')
</code></pre>

<p>But I can't find such interfaces in v4.<br>
How can I navigate using v4?</p>


Programmatically navigate using react router V4

服务器

路由器

路由

我刚刚将react-router从v3替换为v4。但是我不确定如何以编程方式在Component的成员函数中导航。也就是说，在handleClick()函数中，我想在处理完一些数据后导航到/path/some/where。我过去常常这样做：import { browserHistory } from 'react-ro...

问使用react路由器V4以编程方式导航
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用react路由器V4以编程方式导航EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用react路由器V4以编程方式导航
EN