Tahap pertengahan: Penghalaan dengan Penghala Reaksi

Penghalaan ialah aspek penting dalam membina aplikasi web moden. React Router ialah perpustakaan berkuasa yang membolehkan pembangun mengendalikan penghalaan pihak klien dalam aplikasi React dengan cekap. Panduan ini akan menyelidiki asas menyediakan Penghala React, menggunakan komponen penting dan meneroka teknik penghalaan lanjutan seperti laluan bersarang, penghalaan dinamik, parameter laluan dan pengawal laluan.

Pengenalan Penghala Reaksi

Penghala React membolehkan anda mengurus navigasi dan pemaparan komponen berbeza berdasarkan URL. Ia membantu dalam membina aplikasi satu halaman (SPA) dengan pengalaman navigasi yang lancar.

Menyediakan Penghala Reaksi

Untuk mula menggunakan React Router, pasangkannya menggunakan npm atau yarn.

npm install react-router-dom

atau

yarn add react-router-dom

Komponen Laluan, Suis, Pautan dan NavLink

Penghala React menyediakan beberapa komponen teras untuk menentukan laluan dan mengendalikan navigasi.

Komponen Laluan

Komponen Laluan digunakan untuk menentukan laluan dan mengaitkannya dengan komponen.

Contoh:

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

Dalam contoh ini, komponen Laman Utama dipaparkan apabila laluan adalah / dan komponen Perihal dipaparkan apabila laluan adalah /tentang.

Komponen Tukar

Komponen Suis memastikan bahawa hanya laluan padanan pertama dipaparkan.

Contoh:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

Dalam contoh ini, jika tiada laluan sepadan, komponen NotFound dipaparkan.

Komponen Pautan

Komponen Pautan mencipta pautan navigasi dalam aplikasi anda, serupa dengan teg sauh () tetapi tanpa muat semula halaman.

Contoh:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

Dalam contoh ini, mengklik pada pautan menavigasi ke laluan masing-masing tanpa memuat semula halaman.

Komponen NavLink

Komponen NavLink adalah serupa dengan komponen Pautan tetapi menyediakan keupayaan penggayaan tambahan berdasarkan laluan aktif.

Contoh:

import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <nav>
        <NavLink exact to="/" activeClassName="active">
          Home
        </NavLink>
        <NavLink to="/about" activeClassName="active">
          About
        </NavLink>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

Dalam contoh ini, prop activeClassName menggunakan kelas aktif pada pautan yang sepadan dengan laluan semasa.

Teknik Laluan Lanjutan

Laluan Bersarang

Laluan bersarang membolehkan anda membuat laluan dalam laluan lain, mendayakan struktur hierarki navigasi.

Contoh:

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

const Topic = ({ match }) => <h3>Requested Topic ID: {match.params.topicId}</h3>;

const Topics = () => {
  let { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`} component={Topic} />
      </Switch>
    </div>
  );
};

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/">
          <h2>Home</h2>
        </Route>
        <Route path="/topics" component={Topics} />
      </Switch>
    </div>
  </Router>
);

export default App;

Dalam contoh ini, komponen Topik mengandungi laluan bersarang, membenarkan sistem sub-navigasi dalam bahagian Topik.

Penghalaan Dinamik

Penghalaan dinamik membolehkan anda membuat laluan berdasarkan parameter dinamik, seperti ID pengguna atau ID produk.

Contoh:

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

const User = ({ match }) => <h3>User ID: {match.params.userId}</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/user/1">User 1</Link>
        </li>
        <li>
          <Link to="/user/2">User 2</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/user/:userId" component={User} />
      </Switch>
    </div>
  </Router>
);

export default App;

Dalam contoh ini, komponen Pengguna dipaparkan dengan ID pengguna yang diluluskan sebagai parameter laluan.

Parameter Laluan

Parameter laluan membolehkan anda menangkap nilai daripada URL dan menggunakannya dalam komponen anda.

Contoh:

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

const Product = ({ match }) => <h3>Product ID: {match.params.productId}</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/product/101">Product 101</Link>
        </li>
        <li>
          <Link to="/product/202">Product 202</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/product/:productId" component={Product} />
      </Switch>
    </div>
  </Router>
);

export default App;

Dalam contoh ini, komponen Produk menggunakan parameter laluan productId untuk memaparkan ID produk.

Pengawal Laluan dan Lencongan

Pengawal laluan dan ubah hala membantu anda mengawal akses ke laluan tertentu berdasarkan syarat, seperti pengesahan pengguna.

Melindungi Laluan

Untuk melindungi laluan, anda boleh mencipta komponen tertib tinggi (HOC) yang menyemak syarat (cth., pengesahan pengguna) sebelum memaparkan komponen.

Contoh:

import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

const isAuthenticated = false;

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
    }
  />
);

const Dashboard = () => <h3>Dashboard</h3>;
const Login = () => <h3>Login</h3>;

const App = () => (
  <Router>
    <div>
      <PrivateRoute path="/dashboard" component={Dashboard} />
      <Route path="/login" component={Login} />
    </div>
  </Router>
);

export default App;

Dalam contoh ini, komponen PrivateRoute menyemak sama ada pengguna disahkan sebelum memaparkan komponen Papan Pemuka. Jika pengguna tidak disahkan, mereka akan diubah hala ke komponen Log Masuk.

Melaksanakan Ubah hala dalam Penghala Reaksi

Ubah hala boleh dilaksanakan menggunakan komponen Ubah hala untuk menavigasi pengguna ke laluan berbeza secara pengaturcaraan.

Contoh:

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

const OldPage = () => <h3>Old Page (will redirect)</h3>;
const NewPage = () => <h3>New Page</h3>;

const App = () => (
  <Router>
    <Switch>
      <Route path="/old-page">
        <Redirect to="/new-page" />
      </Route>
      <Route path="/new-page" component={NewPage} />
    </Switch>
  </Router>
);



export default App;

Dalam contoh ini, melawat /halaman-lama secara automatik akan mengubah hala pengguna ke /halaman-baru.

Kesimpulan

Memahami dan melaksanakan penghalaan dengan Penghala React adalah penting untuk membina aplikasi React yang mantap. Dengan menguasai asas menyediakan laluan, mengendalikan navigasi dengan Pautan dan NavLink, dan melaksanakan teknik lanjutan seperti laluan bersarang, penghalaan dinamik, parameter laluan dan pengawal laluan, anda boleh mencipta pengalaman navigasi yang lancar dan selamat dalam aplikasi anda. Konsep ini akan membentuk asas keupayaan anda untuk membina aplikasi satu halaman yang canggih dengan React sambil anda terus mengembangkan kemahiran anda.

Atas ialah kandungan terperinci Tahap pertengahan: Penghalaan dengan Penghala Reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!