Navigasi terprogram menggunakan router reaksi

Dengan react-routersaya dapat menggunakan Linkelemen untuk membuat tautan yang secara asli ditangani oleh router reaksi.

Saya melihat secara internal itu panggilan this.context.transitionTo(...).

Saya ingin melakukan navigasi. Bukan dari tautan, tetapi dari pilihan tarik turun (sebagai contoh). Bagaimana saya bisa melakukan ini dalam kode? Apa this.context?

Saya melihat Navigationmixin, tetapi bisakah saya melakukannya tanpa mixins?

Bereaksi Router v5.1.0 dengan kait

Ada useHistorykait baru di React Router> 5.1.0 jika Anda menggunakan React> 16.8.0 dan komponen fungsional.

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

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

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

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Bereaksi Router v4

Dengan v4 dari React Router, ada tiga pendekatan yang dapat Anda ambil untuk routing terprogram dalam komponen.

1. Gunakan komponen withRoutertingkat tinggi.
2. Gunakan komposisi dan render a <Route>
3. Gunakan context.

React Router sebagian besar adalah pembungkus di sekitar historyperpustakaan. historymenangani interaksi dengan browser window.historyuntuk Anda dengan browser dan riwayat hash. Ini juga menyediakan riwayat memori yang berguna untuk lingkungan yang tidak memiliki riwayat global. Ini sangat berguna dalam pengembangan aplikasi seluler (react-native ) dan pengujian unit dengan Node.

Sebuah historyinstance memiliki dua metode untuk navigasi: pushdan replace. Jika Anda menganggap historyarray sebagai lokasi yang dikunjungi, pushakan menambahkan lokasi baru ke array dan replaceakan mengganti lokasi saat ini dalam array dengan yang baru. Biasanya Anda ingin menggunakanpush metode ini saat bernavigasi.

Dalam versi sebelumnya dari Bereaksi Router, Anda harus membuat sendiri historymisalnya, tapi di v4 yang <BrowserRouter>, <HashRouter>dan <MemoryRouter>komponen akan membuat browser, hash, dan contoh memori untuk Anda. React Router membuat properti dan metode historyinstance yang terkait dengan router Anda tersedia melalui konteks, di bawah routerobjek.

1. Gunakan komponen withRoutertingkat tinggi

Komponen withRoutertingkat tinggi akan menyuntikkan historyobjek sebagai penyangga komponen. Ini memungkinkan Anda untuk mengakses pushdan replacemetode tanpa harus berurusan dengan context.

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

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

2. Gunakan komposisi dan render a <Route>

The <Route>komponen tidak hanya untuk lokasi yang cocok. Anda dapat membuat rute tanpa jalur dan akan selalu cocok dengan lokasi saat ini . The <Route>komponen melewati alat peraga yang sama seperti withRouter, sehingga Anda akan dapat mengakses historymetode melalui historyprop.

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

const Button = () => (
  <Route render={({ history}) => (
    <button
      type='button'
      onClick={() => { history.push('/new-location') }}
    >
      Click Me!
    </button>
  )} />
)

3. Gunakan konteks *

Tapi Anda mungkin tidak seharusnya

Opsi terakhir adalah yang hanya boleh Anda gunakan jika Anda merasa nyaman bekerja dengan model konteks React (API Konteks React stabil pada v16).

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

// 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 paling sederhana untuk diterapkan, jadi untuk sebagian besar kasus penggunaan, itu adalah taruhan terbaik Anda.

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

Anda dapat menggunakan useHistorypengait baru pada Komponen Fungsional dan secara terprogram menavigasi:

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

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

React-Router 4.0.0+ Jawab

Di 4.0 dan di atas, gunakan riwayat sebagai penyangga komponen Anda.

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

CATATAN: this.props.history tidak ada jika komponen Anda tidak dirender oleh <Route>. Anda harus menggunakannya <Route path="..." component={YourComponent}/>untuk memiliki this.props.history di YourComponent

React-Router 3.0.0+ Jawab

Di 3.0 dan di atas, gunakan router sebagai penyangga komponen Anda.

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

React-Router 2.4.0+ Jawab

Di 2.4 dan di atas, gunakan komponen urutan yang lebih tinggi untuk mendapatkan router sebagai penyangga 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
};

React-Router 2.0.0+ Jawab

Versi ini kompatibel dengan 1.x sehingga tidak perlu Panduan Upgrade. Hanya melalui contoh-contoh harus cukup baik.

Yang mengatakan, jika Anda ingin beralih ke pola baru, ada modul browserHistory di dalam router yang dapat Anda akses

import { browserHistory } from 'react-router'

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

browserHistory.push('/some/path')

Bacaan lebih lanjut: Sejarah dan Navigasi

React-Router 1.xx Jawab

Saya tidak akan masuk ke detail pemutakhiran. Anda dapat membaca tentang itu di Panduan Upgrade

Perubahan utama tentang pertanyaan di sini adalah perubahan dari Navigasi mixin ke Riwayat. Sekarang ia menggunakan histori browserAPI untuk mengubah rute sehingga kami akan menggunakannyapushState() mulai sekarang.

Inilah contoh menggunakan Mixin:

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

Perhatikan bahwa ini Historyberasal dari rackt / history proyek . Bukan dari React-Router itu sendiri.

Jika Anda tidak ingin menggunakan Mixin karena alasan tertentu (mungkin karena kelas ES6), maka Anda dapat mengakses riwayat yang Anda peroleh dari router this.props.history. Ini hanya akan dapat diakses untuk komponen yang diberikan oleh Router Anda. Jadi, jika Anda ingin menggunakannya dalam komponen anak apa pun, harus diturunkan sebagai atribut melaluiprops .

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

Disini adalah halaman bantuan khusus tentang navigasi di luar komponen Anda

Ini merekomendasikan mengambil referensi history = createHistory()dan memanggilnya replaceState.

React-Router 0.13.x Jawab

Saya masuk ke masalah yang sama dan hanya bisa menemukan solusi dengan mixin Navigasi yang datang dengan router reaksi.

Begini cara 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 menelepon transitionTo() tanpa perlu mengakses.context

Atau Anda bisa mencoba ES6 mewah class

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 menggunakan Redux, ada proyek lain yang disebut ReactRouter-Redux yang memberikan Redux binding untuk ReactRouter, menggunakan agak pendekatan yang sama yang Bereaksi-Redux tidak

React-Router-Redux memiliki beberapa metode yang tersedia yang memungkinkan untuk navigasi sederhana dari pembuat aksi dalam. Ini dapat sangat berguna bagi orang-orang yang memiliki arsitektur di React Native, dan mereka ingin memanfaatkan pola yang sama di React Web dengan overhead boilerplate yang minimal.

Jelajahi metode berikut:

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

Berikut ini adalah contoh penggunaan, dengan Redux-Thunk :

./actioncreators.js

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

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

./viewcomponent.js

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

React-Router v2

Untuk rilis terbaru ( v2.0.0-rc5), metode navigasi yang disarankan adalah dengan langsung mendorong ke singleton sejarah. Anda dapat melihat bahwa dalam tindakan di bagian Navigasi di luar komponen .

Kutipan yang relevan:

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

Jika menggunakan API reaksi-router yang lebih baru, Anda perlu memanfaatkan historydari this.propssaat di dalam komponen jadi:

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

Itu juga menawarkan pushStatetetapi itu usang per peringatan yang dicatat.

Jika menggunakan react-router-redux, ia menawarkan pushfungsi yang dapat Anda kirim seperti:

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

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

Begini cara Anda melakukan ini react-router v2.0.0dengan ES6 . react-routertelah pindah dari mixin.

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
}

React-Router 4.x Jawab:

Pada akhirnya, saya ingin memiliki objek sejarah tunggal yang dapat saya bawa bahkan komponen luar. Yang ingin saya lakukan adalah memiliki satu file history.js yang saya impor sesuai permintaan, dan hanya memanipulasinya.

Anda hanya perlu mengubah BrowserRouterke Router, dan tentukan prop sejarah. Ini tidak mengubah apa pun untuk Anda kecuali bahwa Anda memiliki objek sejarah Anda sendiri yang dapat Anda manipulasi seperti yang Anda inginkan.

Anda perlu menginstal histori , perpustakaan yang digunakan oleh react-router.

Contoh penggunaan, notasi ES6:

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

EDIT 16 April 2018:

Jika Anda harus menavigasi dari komponen yang sebenarnya dirender dari Routekomponen, Anda juga dapat mengakses riwayat dari alat peraga, seperti itu:

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 ini, yang tidak mengontrol sisi server dan karena ini menggunakan router hash v2:

Tempatkan riwayat Anda ke dalam file terpisah (mis. App_history.js ES6):

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

export default appHistory;

Dan gunakan di mana-mana!

Titik masuk Anda untuk react-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((
  <Router history={appHistory}>
  ...
  </Router>
), document.querySelector('[data-role="app"]'));

Navigasi Anda di dalam komponen apa pun (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 <Redirect to="/" push={true} />
}

Jawaban sederhana dan deklaratif adalah bahwa Anda harus menggunakan <Redirect to={URL} push={boolean} />dalam kombinasi dengansetState()

push: boolean - ketika benar, pengalihan akan mendorong entri baru ke dalam sejarah alih-alih menggantikan yang sekarang.

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

Contoh lengkap di sini . Baca lebih lanjut di sini .

PS. Contoh ini menggunakan ES7 + Properti Inisialisasi untuk menginisialisasi keadaan. Lihat di sini juga, jika Anda tertarik.

Peringatan: jawaban ini hanya mencakup versi ReactRouter sebelum 1.0

Saya akan memperbarui jawaban ini dengan kasus penggunaan 1.0.0-rc1 setelah!

Anda dapat melakukannya 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>);
  }
});

Gotcha dengan konteksnya adalah bahwa itu tidak dapat diakses kecuali jika Anda mendefinisikan contextTypesdi kelas.

Adapun apa konteksnya, itu adalah objek, seperti properti, yang diturunkan dari orangtua ke anak, tetapi diturunkan secara implisit, tanpa harus mendeklarasikan ulang properti setiap kali. Lihat https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html

Saya mencoba setidaknya 10 cara untuk melakukan ini sebelum sesuatu berhasil!

Jawaban @Felipe Skinner withRouteragak berlebihan bagi saya, dan saya tidak yakin ingin membuat nama kelas "ExportedWithRouter" yang baru.

Inilah cara paling sederhana dan paling bersih untuk melakukannya, sekitar saat ini React-Router 3.0.0 dan ES6:

React-Router 3.xx 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 bukan kelas default Anda, ekspor suka:

withRouter(Example);
export { Example };

Perhatikan bahwa pada 3.xx, <Link>komponen itu sendiri sedang digunakan router.push, sehingga Anda dapat memberikan apa pun yang Anda berikan pada <Link to=tag, seperti:

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

Untuk melakukan navigasi secara terprogram, Anda perlu mendorong riwayat baru ke props.history di Anda component, jadi sesuatu 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>
        <button onClick={this.handleClick}>
          Redirect!!!
        </button>
      </div>
    )
  }
}

export default App;

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

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

Di bawah ini adalah versi yang saya gunakan:

"react-router": "^ 2.7.0"

"reaksi": "^ 15.3.1"

Di bawah ini adalah komponen reaksi saya di mana saya menggunakan navigasi terprogram menggunakan react-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 
             <button onClick={this.redirectToMainPage.bind(this)}>Redirect</button>
    </div>;
  }
};

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

 module.exports = loginComp;

Di bawah ini adalah konfigurasi untuk router saya:

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

Mungkin bukan pendekatan terbaik tapi ... Menggunakan react-router v4, TypeScript berikut dapat memberikan ide bagi sebagian orang.

Dalam komponen yang diberikan di bawah ini, misalnya LoginPage, routerobjek dapat diakses dan hanya panggilan router.transitionTo('/homepage')untuk menavigasi.

Kode navigasi diambil dari .

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

Di Bereaksi-Router v4 dan ES6

Anda bisa menggunakan withRouterdan 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);

Untuk digunakan withRouterdengan komponen berbasis kelas, coba sesuatu seperti ini di bawah ini. Jangan lupa untuk mengubah pernyataan ekspor untuk digunakan 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);

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

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

dengan nPM apa pun yang diinstal hari ini. "react-router": "^ 3.0.0" dan
"@ types / react-router": "^ 2.0.41"

dengan React-Router v4 di cakrawala, sekarang ada cara baru untuk melakukan 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;

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

react-lego adalah aplikasi contoh yang menunjukkan cara menggunakan / memperbarui router reaksi dan itu termasuk contoh tes fungsional yang menavigasi aplikasi.

Dalam bereaksi router v4. Saya mengikuti dua cara ini untuk merutekan secara programatis.

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

Nomor dua

Mengganti entri saat ini pada tumpukan riwayat

Untuk mendapatkan riwayat dalam alat peraga Anda mungkin harus membungkus komponen Anda dengan

denganRouter

Jika Anda menggunakan hash atau riwayat browser maka Anda dapat melakukannya

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

Dengan versi Bereaksi saat ini (15.3), this.props.history.push('/location');berfungsi untuk saya, tetapi ini menunjukkan peringatan berikut:

browser.js: 49 Peringatan: [react-router] props.historydan context.historysudah tidak digunakan lagi. Silakan gunakan context.router.

dan saya menyelesaikannya menggunakan context.routerseperti 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;

React-Router V4

jika Anda menggunakan versi 4 maka Anda dapat menggunakan perpustakaan saya (plug Shameless) di mana Anda hanya mengirim tindakan dan semuanya hanya berfungsi!

dispatch(navigateTo("/aboutUs"));

trippler

Mereka yang menghadapi masalah dalam mengimplementasikan ini pada react-router v4.

Berikut adalah solusi yang berfungsi untuk menavigasi melalui aplikasi reaksi dari tindakan redux.

history.js

import createHistory from 'history/createBrowserHistory'

export default createHistory()

App.js / Route.jsx

import { Router, Route } from 'react-router-dom'
import history from './history'
...
<Router history={history}>
 <Route path="/test" component={Test}/>
</Router>

another_file.js ATAU file redux

import history from './history' 

history.push('/test') // this should change the url and re-render Test component

Semua berkat komentar ini: ReactTraining mengeluarkan komentar

Jika kebetulan memasangkan RR4 dengan redux melalui react-router-redux , gunakan pembuat tindakan perutean dari react-router-reduxopsi juga.

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)

Jika menggunakan redux thunk / saga untuk mengelola aliran async, impor pembuat tindakan di atas dalam aksi redux dan kait untuk bereaksi komponen menggunakan mapDispatchToProps mungkin lebih baik.

Anda juga dapat menggunakan useHistorypengait di komponen tanpa kewarganegaraan. Contoh dari dokumen.

import { useHistory } from "react-router"

function HomeButton() {
  const history = useHistory()

  return (
    <button type="button" onClick={() => history.push("/home")}>
      Go home
    </button>
  )
}

Catatan: Kait ditambahkan [email protected]dan dibutuhkanreact@>=16.8

Jawaban yang tepat bagi saya pada saat penulisan

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

Tetapi Anda perlu menambahkan PropTypes ke komponen Anda

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

Jangan lupa untuk mengimpor PropTypes

import PropTypes from 'prop-types';

Mungkin bukan solusi terbaik tetapi menyelesaikan pekerjaan:

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

Pada dasarnya, sebuah logika terkait dengan satu tindakan (dalam hal ini penghapusan posting) akan berakhir memanggil pemicu untuk redirect. Ini tidak ideal karena Anda akan menambahkan 'pemicu' simpul DOM ke markup Anda sehingga Anda dapat dengan mudah menyebutnya ketika dibutuhkan. Juga, Anda akan langsung berinteraksi dengan DOM, yang dalam komponen Bereaksi mungkin tidak diinginkan.

Namun, jenis pengalihan ini tidak sering diperlukan. Jadi satu atau dua ekstra, tautan tersembunyi di markup komponen Anda tidak akan terlalu sakit, terutama jika Anda memberi mereka nama yang bermakna.

Ini bekerja untuk saya, tidak perlu impor khusus:

<input 
  type="button" 
  name="back" 
  id="back" 
  class="btn btn-primary" 
  value="Back" 
  onClick={() => { this.props.history.goBack() }} 
/>

gunakan hookrouter sebagai gantinya, alternatif modern untuk bereaksi-router

https://www.npmjs.com/package/hookrouter

import { useRoutes, usePath, A} from "hookrouter";

untuk menjawab pertanyaan OP tentang menautkan melalui kotak pilih Anda dapat melakukannya:

navigate('/about');

Untuk Bereaksi Router v4 +

Dengan asumsi bahwa Anda tidak perlu menavigasi selama render awal itu sendiri (untuk itu Anda dapat menggunakan <Redirect>komponen), inilah yang kami lakukan di aplikasi kami.

Tentukan rute kosong yang mengembalikan null, ini akan memungkinkan Anda untuk mendapatkan akses ke objek sejarah. Anda perlu melakukan ini di tingkat atas di mana AndaRouter didefinisikan.

Sekarang Anda dapat melakukan semua hal yang bisa dilakukan pada sejarah seperti history.push(), history.replace(), history.go(-1)dll!

import React from 'react';
import { HashRouter, Route } from 'react-router-dom';

let routeHistory = null;

export function navigateTo(path) {
  if(routeHistory !== null) {
    routeHistory.push(path);
  }
}

export default function App(props) {
  return (
    <HashRouter hashType="noslash">
      <Route
        render={({ history }) => {
          routeHistory = history;
          return null;
        }}
      />
      {/* Rest of the App */}
    </HashRouter>
  );
}

react-router-dom: 5.1.2

• Situs ini memiliki 3 halaman, yang semuanya dirender secara dinamis di browser.

• Meskipun halaman tidak pernah di-refresh, perhatikan bagaimana React Router membuat URL selalu terbarui saat Anda menavigasi situs. Ini menjaga riwayat browser, memastikan hal-hal seperti tombol kembali dan bookmark berfungsi dengan baik

• Sebuah Beralih terlihat melalui semua elemen anak dan menjadikan yang pertama yang jalan dengan URL saat ini. Gunakan waktu kapan saja Anda memiliki banyak rute, tetapi Anda hanya ingin satu dari mereka untuk membuat sekaligus

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";



export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

// You can think of these components as "pages"
// in your app.

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}```

Jadi dalam jawaban saya ada 3 cara berbeda untuk mengarahkan secara terprogram ke suatu rute. Beberapa solusi telah disajikan tetapi yang berikut ini hanya difokuskan untuk komponen fungsional dengan aplikasi demo tambahan.

Menggunakan versi berikut:

reaksi: 16.13.1

reaksi-dom: 16.13.1

react-router: 5.2.0

react-router-dom: 5.2.0

naskah: 3.7.2

Konfigurasi:

Jadi pertama-tama solusinya menggunakan HashRouter, dikonfigurasi sebagai berikut:

<HashRouter>
    // ... buttons for redirect

    <Switch>
      <Route exact path="/(|home)" children={Home} />
      <Route exact path="/usehistory" children={UseHistoryResult} />
      <Route exact path="/withrouter" children={WithRouterResult} />
      <Route exact path="/redirectpush" children={RedirectPushResult} />
      <Route children={Home} />
    </Switch>
</HashRouter>

Dari dokumentasi tentang <HashRouter>:

A <Router>yang menggunakan bagian hash dari URL (yaitu window.location.hash) untuk menjaga UI Anda sinkron dengan URL.

Solusi:

1. Menggunakan <Redirect>untuk mendorong menggunakan useState:

Menggunakan dalam komponen fungsional ( RedirectPushActionkomponen dari repositori saya) yang dapat kita gunakan useStateuntuk menangani pengalihan. Bagian yang rumit adalah begitu pengalihan terjadi kita perlu mengatur redirectnegara kembali ke false. Dengan menggunakan setTimeOutdengan 0penundaan kami menunggu hingga Bereaksi berkomitmenRedirect untuk DOM kemudian mendapatkan kembali tombol untuk menggunakan waktu berikutnya.

Silakan temukan contoh saya di bawah ini:

const [redirect, setRedirect] = useState(false);
const handleRedirect = useCallback(() => {
    let render = null;
    if (redirect) {
        render = <Redirect to="/redirectpush" push={true} />

        // in order wait until commiting to the DOM
        // and get back the button for clicking next time
        setTimeout(() => setRedirect(false), 0);
    }
    return render;
}, [redirect]);

return <>
    {handleRedirect()}
    <button onClick={() => setRedirect(true)}>
        Redirect push
    </button>
</>

Dari <Redirect>dokumentasi:

Rendering a <Redirect>akan menavigasi ke lokasi baru. Lokasi baru akan mengesampingkan lokasi saat ini di tumpukan riwayat, seperti pengalihan sisi server (HTTP 3xx) lakukan.

2. Menggunakan useHistorykait:

Dalam solusi saya ada komponen yang disebut UseHistoryActionyang mewakili yang berikut:

let history = useHistory();

return <button onClick={() => { history.push('/usehistory') }}>
    useHistory redirect
</button>

The useHistorykait memberi kita akses ke objek sejarah yang membantu kita pemrograman menavigasi atau perubahan rute.

3. Menggunakan withRouter, dapatkan historydari props:

Dibuat satu komponen bernama WithRouterAction, ditampilkan sebagai berikut:

const WithRouterAction = (props:any) => {
    const { history } = props;

    return <button onClick={() => { history.push('/withrouter') }}>
        withRouter redirect
    </button>
}

export default withRouter(WithRouterAction);

Membaca dari withRouterdokumentasi:

Anda bisa mendapatkan akses ke historyproperti objek dan <Route>kecocokan terdekat melalui withRouterkomponen orde tinggi. withRouterakan lulus diperbarui match,, locationdan historydisangga ke komponen yang dibungkus setiap kali dirender.

Demo:

Untuk representasi yang lebih baik, saya telah membangun repositori GitHub dengan contoh-contoh ini, silakan temukan di bawah ini:

https://github.com/norbitrial/react-router-programmatically-redirect-examples

Saya harap ini membantu!