Najprostszy sposób, aby to zrobić:

this.props.history.push("/new/url")

Uwaga:

• możesz zdać history prop od komponentu nadrzędnego do komponentu, który ma zostać wywołany, jeśli nie jest on dostępny.

Miałem podobny problem podczas migracji do React-Router v4, więc postaram się wyjaśnić moje rozwiązanie poniżej.

Proszę nie uważać tej odpowiedzi za właściwy sposób rozwiązania problemu, wyobrażam sobie, że istnieje duża szansa, że powstanie coś lepszego, gdy React Router v4 stanie się bardziej dojrzały i opuści wersję beta (może nawet już istnieje, a ja po prostu go nie odkryłem).

Dla kontekstu, miałem ten problem, ponieważ okazjonalnie używam Redux-Saga do programowej zmiany obiektu historii (powiedzmy, kiedy użytkownik pomyślnie uwierzytelni).

W dokumentacji Reactowego routera, spójrz na <Router> komponent i widać, że masz możliwość przekazania własnego obiektu historii za pomocą rekwizytu. To jest istota rozwiązania- dostarczamy obiekt historii do React-Router z global Moduł.

Kroki:

1. zainstaluj moduł history npm - yarn add history lub npm install history --save

2. Utwórz plik o nazwie history.js w Twój App.js poziom folderu (to było moje preferencje)

   // src/history.js
   
   import createHistory from 'history/createBrowserHistory';
   export default createHistory();`
   

3. Dodaj ten obiekt historii do komponentu routera w ten sposób

   // src/App.js
   
   import history from '../your/path/to/history.js;'
   <Router history={history}>
   // Route tags here
   </Router>
   

4. Dostosuj adres URL tak jak wcześniej, importując Twój obiekt historii globalnej:

   import history from '../your/path/to/history.js;'
   history.push('new/path/here/');
   

Wszystko powinno pozostać zsynchronizowane, a także masz dostęp do sposobu ustawiania obiektu historii programowo, a nie za pomocą komponentu / kontenera.

TL; DR:

if (navigate) {
  return <Redirect to="/" push={true} />
}

Prosta i deklaratywna odpowiedź jest taka, że należy użyć <Redirect to={URL} push={boolean} /> w połączeniu z setState()

Push: boolean - gdy true, przekierowanie spowoduje przeniesienie nowego wpisu do historii zamiast zastąpienia bieżącego.

import { Redirect } from 'react-router'

class FooBar extends React.Component {
  state = {
    navigate: false
  }

  render() {
    const { navigate } = this.state

    // here is the important part
    if (navigate) {
      return <Redirect to="/" push={true} />
    }
   // ^^^^^^^^^^^^^^^^^^^^^^^

    return (
      <div>
        <button onClick={() => this.setState({ navigate: true })}>
          Home
        </button>
      </div>
    )
  }
}

Pełny przykład tutaj . Czytaj więcej tutaj .

PS. Przykład używa ES7+ Property Initializers do inicjalizacji stanu. Zobacz tutaj jak również, jeśli jesteś zainteresowany.

Użyj useHistory Hooka, jeśli używasz komponentów funkcji

Możesz użyć useHistory hook to get history instance.

import { useHistory } from "react-router-dom";

const MyComponent = () => {
  const history = useHistory();
  
  return (
    <button onClick={() => history.push("/about")}>
      Click me
    </button>
  );
}

Hook useHistory daje Ci dostęp do instancji historii, której możesz użyć do nawigacji.

Użyj właściwości history wewnątrz komponentów strony

React Router wprowadza pewne właściwości, w tym history do komponentów strony.

class HomePage extends React.Component {
  render() {
    const { history } = this.props;

    return (
      <div>
        <button onClick={() => history.push("/projects")}>
          Projects
        </button>
      </div>
    );
  }
}

Zawijanie elementów potomnych withRouter aby wprowadzić właściwości routera

withRouter wrapper wstrzykuje router właściwości komponentów. Na przykład możesz użyć tego opakowania, aby wstrzyknąć router do komponentu przycisku wylogowania umieszczonego w menu użytkownika.

import { withRouter } from "react-router";

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

export default LogoutButton;

Możesz również użyć właściwości, aby uzyskać dostęp do obiektu historii: this.props.history.push('new_url')

Krok 1: jest tylko jedna rzecz do zaimportowania na górze:

import {Route} from 'react-router-dom';

Krok 2: na swojej trasie podaj historię:

<Route
  exact
  path='/posts/add'
  render={({history}) => (
    <PostAdd history={history} />
  )}
/>

Krok 3: historia zostaje zaakceptowana jako część właściwości w następnym komponencie, więc możesz po prostu:

this.props.history.push('/');

To działa:

import { withRouter } from 'react-router-dom';

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

export default SomeComponent;

Moja odpowiedź jest podobna do Alexa . Nie jestem pewien, dlaczego React-Router tak niepotrzebnie to skomplikował. Dlaczego powinienem owijać mój komponent HoC, aby uzyskać dostęp do tego, co zasadniczo jest globalne?

W każdym razie, jeśli przyjrzysz się, jak zaimplementowali <BrowserRouter>, to tylko małe opakowanie wokół historii .

Możemy wyciągnąć tę historię tak, że możemy importować ją z dowolnego miejsca. Sztuczka polega jednak na tym, że jeśli robisz renderowanie po stronie serwera i spróbuj import moduł historii, to nie będzie działać, ponieważ używa tylko przeglądarki API. Ale to jest w porządku, ponieważ zwykle przekierowujemy tylko w odpowiedzi na kliknięcie lub inne zdarzenie po stronie klienta. Więc chyba można to podrobić:

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

Z pomocą webpacka możemy zdefiniować niektóre var-y, aby wiedzieć, w jakim środowisku się znajdujemy:

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

A teraz możesz

import history from './history';

Z dowolnego miejsca. Zwróci tylko pusty moduł na serwerze.

Jeśli nie chcesz użyć tej magii vars, musisz tylko require w obiekcie globalnym, gdzie jest to potrzebne (wewnątrz twojego Handlera zdarzeń). import nie zadziała, ponieważ działa tylko na najwyższym poziomie.

Myślę, że @rgommezz obejmuje większość przypadków minus jeden, który moim zdaniem jest dość ważny.

// 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");

To pozwala mi napisać prosty serwis z akcjami/wywołaniami, które mogę wywołać, aby zrobić nawigację z dowolnego komponentu, który chcę, bez robienia wielu rzeczy na moich komponentach...

Nie jest jasne, dlaczego nikt wcześniej nie dostarczył takiego rozwiązania. Mam nadzieję, że to pomoże, i jeśli widzisz jakiś problem z nim proszę dać mi znać.

Od kilku dni testuję v4 i. Podoba mi się jak na razie! Po jakimś czasie to ma sens.

Miałem również to samo pytanie i stwierdziłem, że obsługa tego jak poniżej działa najlepiej (i może nawet być jak to jest zamierzone). Używa state, operatora trójdzielnego i <Redirect>.

W konstruktorze ()

this.state = {
    redirectTo: null
} 
this.clickhandler = this.clickhandler.bind(this);

W render ()

render(){
    return (
        <div>
        { this.state.redirectTo ?
            <Redirect to={{ pathname: this.state.redirectTo }} /> : 
            (
             <div>
               ..
             <button onClick={ this.clickhandler } />
              ..
             </div>
             )
         }

In the clickhandler ()

 this.setState({ redirectTo: '/path/some/where' });

Zmagałem się z tym przez jakiś czas-coś tak prostego, a jednocześnie tak skomplikowanego, bo ReactJS to po prostu zupełnie inny sposób pisania aplikacji internetowych, jest bardzo obcy dla nas starszych ludzi!

Stworzyłem oddzielny komponent do abstrakcji bałaganu:

// 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
};

Następnie dodaj go do swojej metody render():

<LinkButton className="btn btn-primary" to="/location">
    Button Text
</LinkButton>

Ponieważ nie ma innego sposobu, aby poradzić sobie z tym okropnym projektem, napisałem ogólny komponent, który używa withRouter hoc podejście. Poniższy przykład to zawijanie elementu button, ale możesz zmienić go na dowolny klikalny element, którego potrzebujesz:

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);

Użycie:

<NavButton to="/somewhere">Click me</NavButton>

this.props.history.push("/url")

Jeśli tego nie znalazłeś.rekwizyty.historia dostępna w Twoim komponencie , następnie spróbuj tego

import {withRouter} from 'react-router-dom'
export default withRouter(MyComponent)  

Możesz nawigować warunkowo w ten sposób

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>
  );
}

Ponieważ czasami wolę przełączać trasy przez aplikację, a następnie przez przyciski, jest to minimalny działający przykład, który działa dla mnie:

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>
    )
  }
}

Dla tych z Was, którzy wymagają przekierowania przed całkowitym initalizacją routera za pomocą React Router lub React Router Dom, możesz podać przekierowanie, po prostu przystępując do obiektu historii i naciskając na niego nowy stan w swoim constructur z app.js. Rozważmy następujące:

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>)
    }


}

Tutaj chcemy zmienić trasy wyjściowe zależne od subdomeny, poprzez interakcję z obiektem history przed renderowaniem komponentu możemy skutecznie przekierować, pozostawiając nasze trasy w takcie.

window.history.pushState('', '', './login');