Programowa nawigacja za pomocą routera react

React-Router 4.0.0 + Odpowiedz

W wersji 4.0 i nowszej użyj historii jako rekwizytu swojego komponentu.

class Example extends React.Component {
   // use `this.props.history.push('/some/path')` here
};

React-Router 3.0.0 + Odpowiedz

W wersji 3.0 i nowszej używaj routera jako podpory komponentu.

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

React-Router 2.4.0 + Odpowiedz

W wersji 2.4 i nowszej, użyj komponentu wyższego rzędu, aby uzyskać router jako podporę komponentu.

import { withRouter } from 'react-router';

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

// Export the decorated class
var DecoratedExample = withRouter(Example);

// PropTypes
Example.propTypes = {
  router: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  }).isRequired
};

React-Router 2.0.0 + Odpowiedz

Ta wersja jest wstecznie kompatybilna z 1.x więc nie ma potrzeby korzystania z Przewodnika aktualizacji. Samo przechodzenie przez przykłady powinno być wystarczająco dobre.

To powiedziawszy, jeśli chcesz przełączyć się na nowy wzór, Wewnątrz routera znajduje się moduł browserHistory, do którego możesz uzyskać dostęp za pomocą

import { browserHistory } from 'react-router'

Teraz masz dostęp do historii przeglądarki, dzięki czemu możesz robić rzeczy takie jak push, replace, itp... Like:

browserHistory.push('/some/path')

Czytaj dalej: Historia i Nawigacja

React-Router 1.X. X odpowiedź

Główną zmianą w tym pytaniu jest zmiana z nawigacji mixin na historię. Teraz używa historii przeglądarki, aby zmienić trasę, więc od teraz będziemy używać pushState().

Oto exemple przy użyciu Mixin:

var Example = React.createClass({
  mixins: [ History ],
  navigateToHelpPage () {
    this.history.pushState(null, `/help`);
  }
})

Zauważ, że ten History pochodzi z projektu rackt/history. Nie z samego Reacta-routera.

Jeśli nie chcesz używać Mixin z jakiegoś powodu (może z powodu klasy ES6), możesz uzyskać dostęp do historii, którą otrzymujesz z routera z this.props.history. Będzie on dostępny tylko dla komponentów renderowanych przez Router. Tak więc, jeśli chcesz go używać w komponentach potomnych, musi on zostać przekazany jako atrybut poprzez props.

Ty więcej o nowej wersji można przeczytać na ich 1.0.x dokumentacja

Oto strona pomocy dotycząca nawigacji poza komponentem

Zaleca pobranie referencji history = createHistory() i wywołanie replaceState w tym celu.

React-Router 0.13.x odpowiedź

Wpadłem w ten sam problem i mogłem znaleźć rozwiązanie tylko z nawigacją Mixin, która jest dostarczana z reactowym routerem.

Oto jak zrobiłem it

import React from 'react';
import {Navigation} from 'react-router';

let Authentication = React.createClass({
  mixins: [Navigation],

  handleClick(e) {
    e.preventDefault();

    this.transitionTo('/');
  },

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
});

Udało mi się zadzwonić transitionTo() bez potrzeby dostępu .context

import React from 'react';

export default class Authentication extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    this.context.router.transitionTo('/');
  }

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
}

Authentication.contextTypes = {
  router: React.PropTypes.func.isRequired
};

React-Router-Redux

Uwaga: jeśli używasz Redux, istnieje inny projekt o nazwie React-Router-Redux to daje wiązania redux dla Reactroutera, stosując nieco to samo podejście, które React-Redux robi

React-Router-Redux ma kilka metod dostępne, które pozwalają na proste poruszanie się z wewnątrz twórców akcji. Mogą one być szczególnie przydatne dla osób, które mają istniejącą architekturę w React Native i chcą używać tych samych wzorców w React Web z minimalnym obciążeniem kotła.

Poznaj następujące metody:

• push(location)
• replace(location)
• go(number)
• goBack()
• goForward()

Oto przykładowe użycie, z Redux-Thunk :

./ actioncreators.js

import { goBack } from 'react-router-redux'

export const onBackPress = () => (dispatch) => dispatch(goBack())

./ viewcomponentjs

<button
  disabled={submitting}
  className="cancel_button"
  onClick={(e) => {
    e.preventDefault()
    this.props.onBackPress()
  }}
>
  CANCEL
</button>

React-Router v2

Dla najnowszego wydania (v2.0.0-rc5), zalecaną metodą nawigacji jest bezpośrednie wciśnięcie na singleton historii. Możesz to zobaczyć w akcji w poruszając się poza komponentami doc.

Odpowiedni fragment:

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

Jeśli używasz nowszego react-router API, musisz użyć history from this.props gdy wewnątrz komponentów jest tak:

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

Oferuje również pushState, ale jest to przestarzałe / align = "left" /

Jeśli używasz react-router-redux, oferuje funkcję push, którą możesz wysłać w następujący sposób:

import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));

Jednak może to być używane tylko do zmiany adresu URL, a nie do nawigacji na stronie.

Oto Jak to zrobić z react-router v2.0.0 z ES6 . react-router odsunął się od mixinów.

import React from 'react';

export default class MyComponent extends React.Component {
  navigateToPage = () => {
    this.context.router.push('/my-route')
  };

  render() {
    return (
      <button onClick={this.navigateToPage}>Go!</button>
    );
  }
}

MyComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

Dla tego, który nie kontroluje strony serwera i dlatego używa hash routera v2:

Umieść swoją historię w osobnym pliku (np. app_history."js ES6": {]}

import { useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });

export default appHistory;

I używaj go wszędzie!

Twój punkt wejścia dla react-Routera (app."js ES6": {]}

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Redirect } from 'react-router'
import appHistory from './app_history'
...
const render((
  <Router history={appHistory}>
  ...
  </Router>
), document.querySelector('[data-role="app"]'));

Twoja nawigacja wewnątrz dowolnego komponentu (ES6):

import appHistory from '../app_history'
...
ajaxLogin('/login', (err, data) => {
  if (err) {
    console.error(err); // login failed
  } else {
    // logged in
    appHistory.replace('/dashboard'); // or .push() if you don't need .replace()
  }
})

React-Router 4.X odpowiedź:

Po mojej stronie lubię mieć pojedynczy obiekt historii, który mogę nosić nawet z zewnątrz. Lubię mieć jedną historię.plik js, który importuję na żądanie i po prostu nim manipuluję.

Wystarczy zmienić BrowserRouter Na Router i podać rekwizyt historii. To nic nie zmienia dla Ciebie, z wyjątkiem tego, że masz swój własny obiekt historii, który możesz manipulować, jak chcesz.

Musisz zainstalować historia , biblioteka używana przez react-router.

Przykładowe użycie, notacja ES6:

Historia.js

import createBrowserHistory from 'history/createBrowserHistory'
export default createBrowserHistory()

Podstawowy komponent.js

import React, { Component } from 'react';
import history from './history';

class BasicComponent extends Component {

    goToIndex(e){
        e.preventDefault();
        history.push('/');
    }

    render(){
        return <a href="#" onClick={this.goToIndex}>Previous</a>;
    }
}

Edytuj 16 kwietnia, 2018 :

Jeśli musisz nawigować z komponentu, który jest faktycznie renderowany z komponentu Route, Możesz również uzyskać dostęp do historii z właściwości, takich jak:

Podstawowy komponent.js

import React, { Component } from 'react';

class BasicComponent extends Component {

    navigate(e){
        e.preventDefault();
        this.props.history.push('/url');
    }

    render(){
        return <a href="#" onClick={this.navigate}>Previous</a>;
    }
}

Warning: ta odpowiedź obejmuje tylko wersje ReactRouter przed 1.0

Zaktualizuję tę odpowiedź o przypadki użycia 1.0.0-RC1 po!

let Authentication = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },
  handleClick(e) {
    e.preventDefault();
    this.context.router.transitionTo('/');
  },
  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
});

The gotcha with contexts is that it is not accessible unless you define the contextTypes on the class.

Co do tego, co jest kontekstem, jest to obiekt, taki jak rekwizyty, które są przekazywane z rodzica na dziecko, ale są przekazywane w sposób dorozumiany, bez konieczności ponownego deklarowania rekwizyty za każdym razem. Zobacz https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html

Próbowałem co najmniej 10 sposobów, aby to zrobić, zanim coś zadziałało dobrze!

@ Felipe Skinner ' s withRouter odpowiedź była dla mnie trochę przytłaczająca i nie byłem pewien, czy chcę tworzyć nowe nazwy klas "ExportedWithRouter".

Oto najprostszy i najczystszy sposób, aby to zrobić, około obecnych React-Router 3.0.0 i ES6:

React-Router 3.x. X z ES6:

import { withRouter } from 'react-router';

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

// Export the decorated class
export default withRouter(Example);

Lub, jeśli nie jest to Twoja domyślna klasa, Eksportuj w następujący sposób:

withRouter(Example);
export { Example };

Zauważ, że w 3.x. x, the <Link> sam komponent używa router.push, więc możesz przekazać go w dowolny sposób, np.:

   this.props.router.push({pathname: '/some/path', query: {key1: 'val1', key2: 'val2'})'

React Router V4

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 stan inicjalizacji. Zobacz tutaj również, jeśli jesteś zainteresowany.

Dla komponentów Reactowych ES6 + zadziałało dla mnie następujące rozwiązanie.

Śledziłem Felippe ' a Skinnera, ale dodałem kompleksowe rozwiązanie, aby pomóc początkującym, takim jak ja.

Poniżej znajdują się wersje, których użyłem:

"react-router": "^2.7.0 "

"react": "^15.3.1 "

Poniżej znajduje się mój komponent reactowy, w którym używałem nawigacji programowej za pomocą react-routera:

import React from 'react';

class loginComp extends React.Component {
   constructor( context) {
    super(context);
    this.state = {
      uname: '',
      pwd: ''
    };
  }

  redirectToMainPage(){
        this.context.router.replace('/home');
  }

  render(){
    return <div>
           // skipping html code 
             <button onClick={this.redirectToMainPage.bind(this)}>Redirect</button>
    </div>;
  }
};

 loginComp.contextTypes = {
    router: React.PropTypes.object.isRequired
 }

 module.exports = loginComp;

Poniżej znajduje się konfiguracja mojego routera:

 import { Router, Route, IndexRedirect, browserHistory } from 'react-router'

 render(<Router history={browserHistory}>
          <Route path='/' component={ParentComp}>
            <IndexRedirect to = "/login"/>
            <Route path='/login' component={LoginComp}/>
            <Route path='/home' component={HomeComp}/>
            <Route path='/repair' component={RepairJobComp} />
            <Route path='/service' component={ServiceJobComp} />
          </Route>
        </Router>, document.getElementById('root'));

Może nie jest to najlepsze podejście, ale... Używając react-router v4, poniższy Typescript może dać pomysł dla niektórych.

W renderowanym komponencie poniżej, np. LoginPage, router obiekt jest dostępny i po prostu wywołaj router.transitionTo('/homepage'), aby nawigować.

Kod nawigacyjny został zaczerpnięty z https://react-router.now.sh/Match .

"react-router": "^4.0.0-2", "react": "^15.3.1",

import Router from 'react-router/BrowserRouter';
import { History } from 'react-history/BrowserHistory';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();

interface MatchWithPropsInterface {
  component: typeof React.Component,
  router: Router,
  history: History,
  exactly?: any,
  pattern: string
}

class MatchWithProps extends React.Component<MatchWithPropsInterface,any> {
  render() {
    return(
      <Match {...this.props} render={(matchProps) => (
             React.createElement(this.props.component, this.props)

        )}
       />
    )
  }
}

ReactDOM.render(
    <Router>
      {({ router }) => (
        <div>
          <MatchWithProps exactly pattern="/" component={LoginPage} router={router} history={history} />
          <MatchWithProps pattern="/login" component={LoginPage} router={router} history={history} />
          <MatchWithProps pattern="/homepage" component={HomePage} router={router} history={history} />
          <Miss component={NotFoundView} />
        </div>
      )}
    </Router>,

   document.getElementById('app')
);

Aby wykonać nawigację programowo, musisz wcisnąć nową historię do rekwizytów .Historia w Twoim component, więc coś takiego może wykonać pracę za Ciebie:

//using ES6
import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(e) {
    e.preventDefault()
    /* Look at here, you can add it here */
    this.props.history.push('/redirected');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          Redirect!!!
        </button>
      </div>
    )
  }
}

export default App;

In React-Router v4 and ES6

Możesz użyć withRouter i this.props.history.push.

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

class Home extends Component {

    componentDidMount() {
        this.props.history.push('/redirect-to');
    }
}

export default withRouter(Home);

Na podstawie poprzedniej odpowiedzi
od José Antonio Postigo i Bena Wheelera
nowość? należy zapisać w maszynopisie
oraz zastosowanie dekoratorów
OR static property / field

import * as React from "react";
import Component = React.Component;
import { withRouter } from "react-router";

export interface INavigatorProps {
    router?: ReactRouter.History.History;
}

/**
 * Note: goes great with mobx 
 * @inject("something") @withRouter @observer
 */
@withRouter
export class Navigator extends Component<INavigatorProps, {}>{
    navigate: (to: string) => void;
    constructor(props: INavigatorProps) {
        super(props);
        let self = this;
        this.navigate = (to) => self.props.router.push(to);
    }
    render() {
        return (
            <ul>
                <li onClick={() => this.navigate("/home")}>
                    Home
                </li>
                <li onClick={() => this.navigate("/about")}>
                    About
                </li>
            </ul>
        )
    }
}

/**
 * Non decorated 
 */
export class Navigator2 extends Component<INavigatorProps, {}> {

    static contextTypes = {
        router: React.PropTypes.object.isRequired,
    };

    navigate: (to: string) => void;
    constructor(props: INavigatorProps, context: any) {
        super(props, context);
        let s = this;
        this.navigate = (to) =>
            s.context.router.push(to);
    }
    render() {
        return (
            <ul>
                <li onClick={() => this.navigate("/home")}>
                    Home
                </li>
                <li onClick={() => this.navigate("/about")}>
                    About
                </li>
            </ul>
        )
    }
}

Z czymkolwiek npm zainstalowanym dzisiaj. "react-router": "^3.0.0 " i
"@types/react-router": "^2.0.41 "

Gdy react-Router v4 jest już na horyzoncie, istnieje nowy sposób na to.

import { MemoryRouter, BrowserRouter } from 'react-router';

const navigator = global && global.navigator && global.navigator.userAgent;
const hasWindow = typeof window !== 'undefined';
const isBrowser = typeof navigator !== 'undefined' && navigator.indexOf('Node.js') === -1;
const Router = isBrowser ? BrowserRouter : MemoryRouter;

<Router location="/page-to-go-to"/>

React-lego to przykładowa aplikacja, która pokazuje Jak używać/aktualizować react-router i zawiera przykładowe testy funkcjonalne, które poruszają się po aplikacji.

Z aktualną wersją Reacta (15.3), this.props.history.push('/location'); zadziałało dla mnie, ale wyświetliło się następujące ostrzeżenie:

Przeglądarka.js: 49 Warning: [react-router] props.history and context.history są przestarzałe. Proszę użyć context.router.

I rozwiązałem to używając context.router Tak:

import React from 'react';

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.backPressed = this.backPressed.bind(this);
    }

    backPressed() {
        this.context.router.push('/back-location');
    }

    ...
}

MyComponent.contextTypes = {
    router: React.PropTypes.object.isRequired
};

export default MyComponent;

Jeśli używasz hasha lub historii przeglądarki, możesz zrobić

hashHistory.push('/login');
browserHistory.push('/login');

Aby użyć withRouter z komponentem opartym na klasach, spróbuj czegoś takiego poniżej. Nie zapomnij zmienić instrukcji export na withRouter:

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

class YourClass extends React.Component {
  yourFunction = () => {
    doSomeAsyncAction(() =>
      this.props.history.push('/other_location')
    )
  }

  render() {
    return (
      <div>
        <Form onSubmit={ this.yourFunction } />
      </div>
    )
  }
}

export default withRouter(YourClass);

React-Router V4

Jeśli używasz wersji 4, możesz użyć mojej biblioteki (Shameless plug), gdzie po prostu wysyłasz akcję i wszystko po prostu działa!

dispatch(navigateTo("/aboutUs"));

Https://www.npmjs.com/package/trippler

W reactowym routerze v4. Podążam tą drogą, aby programowo kierować.

1. this.props.history.push("/something/something")
2. this.props.history.replace("/something/something")

Numer dwa

Zastępuje bieżący wpis na stosie historii

Aby uzyskać historię w rekwizytach, być może będziesz musiał zawinąć swój komponent

With Router https://reacttraining.com/react-router/core/api/withRouter

Proszę znaleźć poniżej kod roboczy: Jak omówiono w Ten artykuł , jest to bardzo prosta metoda poruszania się za pomocą routera reactowego:

class Register extends React.Component {
  state = {
    toDashboard: false,
  }
  handleSubmit = (user) => {
    saveUser(user)
      .then(() => this.setState(() => ({
        toDashboard: true
      })))
  }
  render() {
    if (this.state.toDashboard === true) {
      return <Redirect to='/dashboard' />
    }

    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

Redirect /> is

Composable deklaratywne Zdarzenie użytkownika - > zmiana stanu - > ponowne renderowanie

Komponent rejestru jest renderowany przez Router Reactowy, nasz kod może wyglądać tak

class Register extends React.Component {
  handleSubmit = (user) => {
    saveUser(user).then(() =>
      this.props.history.push('/dashboard')
    ))
  }
  render() {
    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

Dodając withRouter, wyglądałoby to tak

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

class Register extends React.Component {
  handleSubmit = (user) => {
    saveUser(user).then(() =>
      this.props.history.push('/dashboard')
    ))
  }
  render() {
    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

export default withRouter(Register)

Istnieją dwa sposoby programowo Nawiguj za pomocą routera React-i historii.przyj. Którego używasz zależy głównie od Ciebie i Twojego konkretnego przypadku użycia, chociaż staram się faworyzować przekierowanie.

Właściwa odpowiedź była dla mnie w momencie pisania

this.context.router.history.push('/');

Ale musisz dodać PropTypes do swojego komponentu

Header.contextTypes = {
  router: PropTypes.object.isRequired
}
export default Header;

Nie zapomnij zaimportować Proptypów

import PropTypes from 'prop-types';

Może nie najlepsze rozwiązanie, ale daje radę:

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

// create functional component Post
export default Post = () => (
    <div className="component post">

        <button className="button delete-post" onClick={() => {
            // ... delete post
            // then redirect, without page reload, by triggering a hidden Link
            document.querySelector('.trigger.go-home').click();
        }}>Delete Post</button>

        <Link to="/" className="trigger go-home hidden"></Link>

    </div>
);

Zasadniczo logika powiązana z jedną akcją (w tym przypadku usunięcie postu) zakończy się wywołaniem wyzwalacza przekierowania. Nie jest to idealne rozwiązanie, ponieważ dodasz węzeł DOM 'trigger' do znaczników, abyś mógł go wygodnie wywołać w razie potrzeby. Ponadto będziesz bezpośrednio wchodzić w interakcję z DOM, co w komponencie Reactowym może nie być pożądane.

Jednak tego typu przekierowanie nie jest tak często wymagane. Więc jeden czy dwa dodatkowe, ukryte linki w znacznikach komponentów nie zaszkodzą tak bardzo, zwłaszcza jeśli nadasz im znaczące nazwy.

Jeśli zdarzy się sparować RR4 z / redux przez react-router-redux, można również użyć akcji routingu creators z react-router-redux.

import { push, replace, ... } from 'react-router-redux'

class WrappedComponent extends React.Component {
  handleRedirect(url, replaceState = true) { 
    replaceState 
      ? this.props.dispatch(replace(url)) 
      : this.props.dispatch(push(url)) 
  }
  render() { ... }
}

export default connect(null)(WrappedComponent)

Jeśli używasz redux thunk / saga do zarządzania przepływem asynchronicznym, zaimportuj powyższych twórców akcji do akcji redux i hook do komponentów reactowych za pomocą mapDispatchToProps może być lepszy.

Po prostu użyj this.props.history.push('/where/to/go');