Pemrograman menavigasi menggunakan bereaksi router

Bereaksi Router v5.1.0 dengan kait

Ada yang baru useHistory hook dalam Bereaksi Router >5.1.0 jika anda menggunakan Bereaksi >16.8.0 dan komponen fungsional.

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

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

  function handleClick() {
    history.push("/home");
  }

  return (

      Go home

  );
}

Bereaksi Router v4

Dengan v4 Bereaksi Router, ada tiga pendekatan yang dapat anda ambil untuk program routing dalam komponen-komponen.

1. Gunakan withRouter higher-order komponen.
2. Gunakan komposisi dan membuat <Rute>
3. Gunakan konteks.

Bereaksi Router adalah sebagian besar bungkus sekitar sejarah perpustakaan. sejarah menangani interaksi dengan browser's jendela.sejarah untuk anda dengan browser dan hash sejarah. Hal ini juga menyediakan memori sejarah yang berguna untuk lingkungan yang don't memiliki sejarah global. Hal ini sangat berguna dalam pengembangan aplikasi mobile (bereaksi-asli) dan unit pengujian dengan Node.

Sebuah sejarah contoh memiliki dua metode untuk navigasi: push dan menggantikan. Jika anda berpikir tentang sejarah sebagai array dari lokasi yang dikunjungi, push akan menambah lokasi baru untuk array dan menggantikan akan menggantikan lokasi saat ini dalam array dengan yang baru. Biasanya anda akan ingin menggunakan push metode ketika anda menavigasi.

Dalam versi sebelumnya dari Bereaksi Router, anda harus membuat sendiri sejarah misalnya, tapi di v4 <BrowserRouter>, <HashRouter>, dan <MemoryRouter> komponen akan membuat browser, hash, dan memori contoh untuk anda. Bereaksi Router membuat properti dan metode dari sejarah contoh yang berhubungan dengan router anda, tersedia melalui konteks, di bawah router objek.

1. Gunakan withRouter higher-order komponen

The withRouter higher-order komponen akan menyuntikkan sejarah objek sebagai penyangga komponen. Hal ini memungkinkan anda untuk mengakses push dan menggantikan metode tanpa harus berurusan dengan konteks.

import { withRouter } from 'react-router-dom'
// this also works with react-router-native

const Button = withRouter(({ history }) => (
   { history.push('/new-location') }}
  >
    Click Me!

))

2. Gunakan komposisi dan membuat <Rute>

The <Rute> komponen isn't hanya untuk lokasi yang cocok. Anda dapat membuat rute jalan tanpa dan itu akan selalu sesuai dengan lokasi saat ini. The <Rute> komponen melewati peraga yang sama sebagai withRouter, sehingga anda akan dapat mengakses sejarah metode melalui sejarah prop.

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

const Button = () => (
   (
     { history.push('/new-location') }}
    >
      Click Me!

  )} />
)

3. Menggunakan konteks*

Tapi anda mungkin tidak harus

Opsi terakhir adalah salah satu yang anda hanya harus menggunakan jika anda merasa nyaman bekerja dengan Bereaksi's konteks model. Meskipun konteks adalah sebuah pilihan, melainkan harus menekankan bahwa konteks adalah tidak stabil API dan Bereaksi memiliki bagian Mengapa Tidak Menggunakan Konteks di dokumentasi mereka. Jadi gunakan dengan resiko anda sendiri!

const Button = (props, context) => (
   {
      // context.history.push === history.push
      context.history.push('/new-location')
    }}
  >
    Click Me!

)

// you need to specify the context type so that it
// is available within the component
Button.contextTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  })
}

1 dan 2 adalah pilihan yang paling sederhana untuk melaksanakan, sehingga untuk sebagian besar kasus, mereka adalah taruhan terbaik anda.

Selain itu anda bisa mendapatkan lebih banyak pengetahuan dari link di bawah ini tentang Routing, URL Parameter dan Bersarang routing.

Routing dalam Bereaksi JS

• Langkah demi langkah penjelasan tentang bagaimana untuk mengintegrasikan bereaksi-router di ReactJS

URL Parameter Bereaksi dengan Router

• Di sini anda bisa mendapatkan ide tentang bagaimana untuk mengatur parameter URL dengan Bereaksi Router. Penggunaan utama dari parameter URL routing adalah untuk membuat komponen yang sama berdasarkan url dinamis.

Bersarang Rute dalam Bereaksi JS

• Jika anda ingin memuat sub rute di jalur utama maka anda harus membuat list rute. Berikut ini adalah contoh hidup dari itu.

Harap ini akan membantu anda!

Bereaksi-Router 5.1.0+ Jawaban (menggunakan kait dan Bereaksi >16.8)

Anda dapat menggunakan baru useHistory kail pada Komponen Fungsional dan Pemrograman menavigasi:

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

function HomeButton() {
  let history = useHistory();
  // use history.push('/some/path') here
};

Bereaksi-Router 4.0.0+ Jawaban

Di 4.0 dan di atas, menggunakan sejarah sebagai penyangga dari komponen anda.

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

CATATAN: ini.alat peraga.sejarah tidak ada dalam kasus anda komponen tidak diberikan oleh <Rute>. Anda harus menggunakan <Rute jalur="..." komponen={YourComponent}/> ini.alat peraga.sejarah di YourComponent

Bereaksi-Router 3.0.0+ Jawaban

Di 3.0 dan di atas, penggunaan router sebagai penyangga dari komponen anda.

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

Bereaksi-Router 2.4.0+ Jawaban

Di 2,4 dan di atas, penggunaan yang lebih tinggi komponen rangka untuk mendapatkan router sebagai penyangga dari komponen anda.

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

Bereaksi-Router 2.0.0+ Jawaban

Versi ini kompatibel dengan 1.x jadi ada's tidak perlu Upgrade Guide. Hanya akan melalui contoh-contoh harus cukup baik.

Yang mengatakan, jika anda ingin beralih ke pola baru, di sana's browserHistory modul di dalam router yang dapat anda akses dengan

impor { browserHistory } dari 'bereaksi-router'

Sekarang anda memiliki akses ke sejarah browser anda, sehingga anda dapat melakukan hal-hal seperti mendorong, mengganti, dll... Seperti:

browserHistory.push('/beberapa/jalan')

Bacaan lebih lanjut: Sejarah dan Navigation

Bereaksi-Router 1.x.x Jawaban

Aku tidak akan pergi ke upgrade rincian. Anda dapat membaca tentang itu di Panduan Upgrade

Perubahan utama tentang pertanyaan di sini adalah perubahan dari Navigasi mixin Sejarah. Sekarang ini's menggunakan browser historyAPI untuk mengubah rute jadi kita akan menggunakan pushState() dari sekarang.

Berikut ini's sebuah contoh menggunakan Mixin:

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

Catatan bahwa ini Sejarah berasal dari rackt/sejarah proyek. Tidak Bereaksi dari Router itu sendiri.

Jika anda don't ingin menggunakan Mixin untuk beberapa alasan (mungkin karena ES6 kelas), maka anda dapat mengakses sejarah yang anda dapatkan dari router dari ini.alat peraga.sejarah. Itu akan hanya dapat diakses untuk komponen yang diberikan oleh Router anda. Jadi, jika anda ingin menggunakannya dalam setiap komponen anak itu perlu diturunkan sebagai atribut melalui alat peraga.

Anda dapat membaca lebih lanjut tentang rilis baru mereka 1.0.x dokumentasi

Berikut ini adalah halaman bantuan khusus tentang navigasi luar component

Itu merekomendasikan meraih referensi sejarah = createHistory() dan memanggil replaceState itu.

Bereaksi-Router 0.13.x Jawaban

Saya punya masalah yang sama dan hanya bisa menemukan solusi dengan Navigasi mixin yang datang dengan bereaksi-router.

Berikut ini's bagaimana saya melakukannya

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

Saya bisa sebut transitionTo() tanpa perlu akses .konteks

Atau anda bisa mencoba yang mewah ES6 kelas

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

Bereaksi-Router-Redux

Catatan: jika anda're menggunakan Redux, ada proyek lain yang disebut Bereaksi-Router-Redux yang memberikan anda redux binding untuk ReactRouter, menggunakan sedikit pendekatan yang sama yang Bereaksi-Redux tidak

Bereaksi-Router-Redux telah beberapa metode tersedia yang memungkinkan untuk mudah menavigasi dari dalam aksi pencipta. Ini dapat sangat berguna untuk orang-orang yang memiliki arsitektur yang ada dalam Bereaksi Asli, dan mereka ingin memanfaatkan pola-pola yang sama dalam Bereaksi Web dengan minimal boilerplate overhead.

Mengeksplorasi metode berikut:

• push(lokasi)
• ganti(lokasi)
• pergi(nomor)
• goBack()
• goForward()

Berikut adalah contoh penggunaan, dengan Redux-Thunk:

./actioncreators.js

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

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

./viewcomponent.js

 {
    e.preventDefault()
    this.props.onBackPress()
  }}
>
  CANCEL

Bereaksi-Router v2

Untuk rilis terbaru (v2.0.0-rc5), yang direkomendasikan navigasi adalah dengan metode langsung mendorong ke sejarah singleton. Anda dapat melihat bahwa dalam aksi di Menavigasi di luar dari Komponen doc.

Terkait kutipan:

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

Jika menggunakan lebih baru bereaksi-router API, anda perlu membuat sejarah dari ini.alat peraga ketika dalam komponen sehingga:

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

Hal ini juga menawarkan pushState tapi itu tak berlaku lagi per login peringatan.

Jika menggunakan bereaksi-router-redux, ia menawarkan push fungsi anda dapat mengirimkan seperti:

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

Namun ini mungkin hanya digunakan untuk mengubah URL, bukan untuk benar-benar menavigasi ke halaman.

Berikut ini's bagaimana anda melakukan ini dengan bereaksi-router v2.0.0 dengan ES6. bereaksi-router telah pindah dari mixin.

import React from 'react';

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

  render() {
    return (
      Go!
    );
  }
}

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

Bereaksi-Router 4.x Menjawab :

Pada akhir saya, saya ingin memiliki satu sejarah objek yang saya dapat melakukan bahkan di luar komponen. Apa yang saya ingin lakukan adalah untuk memiliki satu history.js file yang saya impor pada permintaan, dan hanya memanipulasi itu.

Anda hanya perlu mengubah BrowserRouter ke Router, dan menentukan sejarah prop. Ini doesn't mengubah apa pun untuk anda, kecuali bahwa anda memiliki anda sendiri sejarah objek yang anda dapat memanipulasi seperti yang anda inginkan.

Anda perlu menginstal sejarah, perpustakaan yang digunakan oleh bereaksi-router.

Contoh penggunaan, ES6 notasi :

history.js

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

BasicComponent.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>;
    }
}

MENGEDIT 16 April 2018 :

Jika anda harus menavigasi dari komponen yang benar-benar diberikan dari Rute komponen, anda juga dapat mengakses sejarah dari alat peraga, seperti :

BasicComponent.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>;
    }
}

Untuk yang satu ini, siapa yang tidak mengontrol sisi server dan karena ini adalah menggunakan hash router v2:

Tempat anda sejarah ke dalam file terpisah (misalnya app_history.js ES6):

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

export default appHistory;

Dan menggunakannya di mana-mana!

Entry point anda untuk bereaksi-router (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((

  ...

), document.querySelector('[data-role="app"]'));

Navigasi anda dalam setiap komponen (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()
  }
})

Bereaksi Router V4

tl:dr;

if (navigate) {
  return 
}

Sederhana dan deklaratif jawabannya adalah bahwa anda perlu menggunakan <Redirect ke={URL} push={boolean} /> dalam kombinasi dengan setState()

push: boolean - bila benar, sistem akan mendorong entri baru pada sejarah bukan menggantikan satu saat ini.

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

    return (
      <div>
         this.setState({ navigate: true })}>
          Home

      </div>
    )
  }
}

Contoh penuh di sini. Baca lebih lanjut di sini.

PS. Contoh menggunakan ES7+ Properti Penginisialisasi untuk menginisialisasi negara. Lihat di sini dan juga, jika anda're tertarik.

Peringatan: jawaban ini hanya mencakup ReactRouter versi sebelum 1.0

saya akan update ini menjawab dengan 1.0.0-rc1 kasus penggunaan setelah!

Anda dapat melakukan ini tanpa mixin juga.

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

Yang gotcha dengan konteks adalah bahwa hal itu tidak dapat diakses kecuali anda mendefinisikan contextTypes di kelas.

Seperti apa konteks, itu adalah sebuah objek, seperti alat peraga, yang diturunkan dari orang tua ke anak, tetapi diturunkan secara implisit, tanpa harus redeclare alat peraga masing-masing waktu. Lihat https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html

Aku mencoba setidaknya 10 cara untuk melakukan hal ini sebelum sesuatu yang tidak bekerja dengan benar!

@Felipe Skinner's withRouter jawaban itu agak luar biasa untuk saya, dan saya tidak't yakin saya ingin membuat yang baru "ExportedWithRouter" nama kelas.

Berikut ini's sederhana dan bersih untuk melakukannya, circa saat ini Bereaksi-Router 3.0.0 dan ES6:

Bereaksi-Router 3.x.x dengan 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);

atau, jika itu's tidak default kelas, ekspor seperti:

withRouter(Example);
export { Example };

Perhatikan bahwa dalam 3.x.x, <Link> komponen itu sendiri adalah dengan menggunakan router.push, sehingga anda dapat melewati itu apa pun yang anda akan lulus <Link ke= tag, seperti:

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

Untuk melakukan navigasi pemrograman, anda perlu untuk mendorong baru *sejarah * ke alat peraga.sejarah** di komponen, jadi hal seperti ini dapat melakukan pekerjaan untuk anda:

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

          Redirect!!!

      </div>
    )
  }
}

export default App;

Tidak mungkin pendekatan yang terbaik tapi... Menggunakan bereaksi-router v4, berikut Ketangkasan bisa memberikan gambaran untuk beberapa.

Di diberikan komponen di bawah ini, misal LoginPage, router objek dapat diakses dan hanya memanggil router.transitionTo('/homepage') untuk menavigasi.

Navigasi kode diambil dari.

"bereaksi-router": "^4.0.0-2", "bereaksi": "^pasak 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 {
  render() {
    return(
       (
             React.createElement(this.props.component, this.props)

        )}
       />
    )
  }
}

ReactDOM.render(

      {({ router }) => (
        <div>




        </div>
      )}
    ,

   document.getElementById('app')
);

Untuk ES6 + Bereaksi komponen, berikut solusi yang bekerja untuk saya.

Aku mengikuti Felippe skinner, tetapi menambahkan ujung ke ujung solusi untuk membantu pemula seperti saya.

Berikut ini adalah versi saya digunakan:

"bereaksi-router": "^2.7.0"

"bereaksi": "^pasak 15.3.1"

Di bawah ini saya bereaksi komponen mana saya digunakan program navigasi menggunakan bereaksi-router:

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

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

 module.exports = loginComp;

Berikut adalah konfigurasi untuk router saya:

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

 render(







        , document.getElementById('root'));

Di Bereaksi-Router v4 dan ES6

Anda dapat menggunakan withRouter dan ini.alat peraga.sejarah.push.

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

class Home extends Component {

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

export default withRouter(Home);

Untuk menggunakan withRouter dengan kelas berbasis komponen, mencoba sesuatu seperti ini di bawah ini. Don't lupa untuk mengubah pernyataan ekspor untuk menggunakan withRouter:

impor { withRouter } dari 'bereaksi-router-dom'

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

  render() {
    return (
      <div>

      </div>
    )
  }
}

export default withRouter(YourClass);

berdasarkan jawaban sebelumnya dari José Antonio Postigo dan Ben Wheeler hal-hal baru? ditulis dalam Naskah dan penggunaan dekorator ATAU statis properti/bidang

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{
    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 {

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

dengan apapun npm dipasang hari ini. "bereaksi-router": "^3.0.0" dan "@jenis/bereaksi-router": "^2.0.41"

Dalam bereaksi router v4. Saya mengikuti dua cara untuk rute pemrograman.

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

Nomor dua

Menggantikan saat ini masuk pada sejarah stack

Untuk mendapatkan sejarah di alat peraga yang mungkin anda miliki untuk membungkus komponen dengan

withRouter

dengan Bereaksi-Router v4 di cakrawala, sekarang ada cara baru untuk melakukan hal ini.

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;

bereaksi-lego adalah contoh aplikasi yang menunjukkan cara menggunakan/update bereaksi-router dan itu termasuk contoh tes fungsional yang menavigasi aplikasi.

Jika anda menggunakan hash atau sejarah browser maka anda dapat melakukan

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

Dengan saat ini Bereaksi versi (15.3), ini.alat peraga.sejarah.push('/lokasi'); bekerja untuk saya, tapi itu menunjukkan peringatan berikut:

browser.js:49 Peringatan: [bereaksi-router] alat peraga.sejarah dan konteks.sejarah sudah tidak dipakai lagi. Silakan gunakan konteks.router.

dan aku dipecahkan menggunakan konteks.router seperti ini:

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;

Bereaksi-Router V4

jika anda'kembali menggunakan versi 4 maka anda dapat menggunakan perpustakaan saya (Shameless plug) di mana anda hanya mengirimkan sebuah tindakan dan segala sesuatu yang hanya bekerja!

dispatch(navigateTo("/aboutUs"));

trippler