Bagaimana untuk Navigasi Secara Program dalam Penghala Reaksi tanpa Mixin?

Navigasi Programmatik dalam Penghala Reaksi tanpa Campuran

Penghala Reaksi membolehkan navigasi lancar melalui konteks, tetapi memahami penggunaannya boleh mengelirukan. Mari kita terokai cara menavigasi secara pengaturcaraan tanpa menggunakan mixin.

React Router menyediakan objek sejarah melalui konteks, menawarkan akses kepada kaedah tolak dan ganti untuk manipulasi. Walau bagaimanapun, dengan kemajuan React, anda mempunyai berbilang pilihan untuk navigasi program:

1. Gunakan withRouter HOC (React Router 6 tidak disokong):

withRouter HOC menyuntik objek sejarah ke dalam prop komponen, membolehkan akses terus kepada kaedah navigasi.

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

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

2. Render Pathless Route (React Router 6 tidak disokong):

Render a Pathless Route tanpa laluan, yang akan sentiasa sepadan dengan lokasi semasa dan melepasi prop sejarah juga.

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

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

3. Gunakan Konteks (Kompleks dan Tidak Digunapakai):

Pendekatan ini memerlukan pemahaman mendalam tentang konteks React dan harus digunakan dengan berhati-hati. Anda perlu menentukan jenis konteks komponen untuk mengakses prop sejarah.

import React from 'react';

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

Button.contextTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  })
};

Untuk kebanyakan senario, pilihan 1 dan 2 memberikan kesederhanaan dan disyorkan.

Atas ialah kandungan terperinci Bagaimana untuk Navigasi Secara Program dalam Penghala Reaksi tanpa Mixin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!