Tahap kanan: Penghalaan dengan Penghala React

Sebagai pembangun peringkat kanan, adalah penting untuk mempunyai pemahaman yang menyeluruh tentang penghalaan dalam aplikasi React. React Router menyediakan penyelesaian yang mantap untuk mengurus navigasi dan pemaparan komponen berdasarkan laluan URL. Panduan ini merangkumi persediaan Penghala React, komponen penting dan teknik lanjutan seperti laluan bersarang, penghalaan dinamik, parameter laluan dan pengawal laluan.

Pengenalan Penghala Reaksi

React Router ialah perpustakaan yang berkuasa untuk mengendalikan penghalaan pihak pelanggan dalam aplikasi React. Ia membenarkan penghalaan dinamik, laluan bersarang dan pemaparan bersyarat berdasarkan laluan URL.

Menyediakan Penghala Reaksi

Mula-mula, pasang Penghala Reaksi 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 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;

Komponen Tukar

Komponen Suis memastikan bahawa hanya satu laluan dipaparkan pada satu masa, sepadan dengan laluan pertama yang sesuai.

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;

Komponen Pautan

Komponen Pautan mencipta pautan navigasi, menghalang muat semula halaman penuh dan mengekalkan pengalaman aplikasi satu 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;

Komponen NavLink

Komponen NavLink adalah serupa dengan Pautan tetapi membenarkan penggayaan 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;

Teknik Laluan Lanjutan

Laluan Bersarang

Laluan bersarang membolehkan anda membuat laluan dalam laluan lain, yang berguna untuk reka letak kompleks 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;

Penghalaan Dinamik

Penghalaan dinamik membolehkan membuat laluan berdasarkan parameter dinamik, berguna untuk profil pengguna atau butiran 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;

Parameter Laluan

Parameter laluan membenarkan penangkapan nilai daripada URL untuk digunakan dalam komponen.

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;

Pengawal Laluan dan Lencongan

Melindungi Laluan

Pengawal laluan mengehadkan akses ke laluan tertentu berdasarkan syarat seperti pengesahan pengguna.

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;

Melaksanakan Ubah hala dalam Penghala Reaksi

Ubah hala boleh 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, melawati /old-page secara automatik mengubah hala pengguna ke /new-page.

Kesimpulan

Menguasai penghalaan dengan Penghala React adalah penting untuk membina aplikasi React yang canggih dan mesra pengguna. Memahami cara menyediakan laluan, menggunakan komponen teras dan melaksanakan teknik lanjutan seperti laluan bersarang, penghalaan dinamik, parameter laluan dan pengawal laluan akan membolehkan anda mencipta sistem navigasi yang mantap. Sebagai pembangun kanan, kemahiran ini akan membantu anda mereka bentuk dan melaksanakan seni bina penghalaan berskala dalam projek React anda, memastikan pengalaman pengguna yang lancar dan pangkalan kod yang boleh diselenggara.

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