Peringkat junior: Penghalaan dengan Penghala Reaksi

Penghalaan ialah bahagian penting dalam membina aplikasi web moden. React Router ialah perpustakaan berkuasa yang membolehkan anda mengendalikan penghalaan dalam aplikasi React dengan berkesan. Panduan ini akan membantu anda memahami asas Penghala React, termasuk menyediakannya, menggunakan komponen penting dan meneroka teknik penghalaan lanjutan seperti laluan bersarang, penghalaan dinamik, parameter laluan dan pengawal laluan.

Pengenalan Penghala Reaksi

Penghala React mendayakan navigasi antara komponen berbeza dalam aplikasi React, membolehkan anda membuat aplikasi satu halaman (SPA) dengan berbilang paparan.

Menyediakan Penghala Reaksi

Untuk bermula dengan React Router, anda perlu memasangnya dalam projek anda. Anda boleh melakukan ini menggunakan npm atau benang.

npm install react-router-dom

atau

yarn add react-router-dom

Komponen Laluan, Suis, Pautan dan NavLink

React Router menyediakan beberapa komponen untuk menentukan laluan dan mengendalikan navigasi.

Komponen Laluan

Komponen Laluan digunakan untuk menentukan laluan dalam aplikasi anda. Ia menentukan laluan dan komponen yang perlu dipaparkan apabila laluan dipadankan.

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 diberikan apabila laluan adalah /tentang.

Komponen Tukar

Komponen Suis memastikan bahawa hanya satu laluan diberikan pada satu masa. Ia memaparkan Laluan pertama yang sepadan dengan URL semasa.

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 memuatkan 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, berguna untuk membuat reka letak dengan sub-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 React

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 React Router 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 Peringkat junior: Penghalaan dengan Penghala Reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!