Tahap arkitek: Penghalaan dengan Penghala Reaksi-tutorial js-php.cn

Architect level: Routing with React Router

Sebagai pembangun peringkat arkitek, menguasai React Router adalah penting untuk mereka bentuk sistem navigasi berskala, boleh diselenggara dan cekap dalam aplikasi React. Panduan ini memberikan pandangan yang mendalam tentang menyediakan Penghala Reaksi, menggunakan komponen teras seperti Laluan, Suis, Pautan dan NavLink serta meneroka teknik penghalaan lanjutan termasuk laluan bersarang, penghalaan dinamik, parameter laluan, pengawal laluan dan ubah hala.

Pengenalan Penghala Reaksi

React Router ialah perpustakaan berkuasa yang memudahkan penciptaan aplikasi satu halaman (SPA) dengan laluan dinamik dan bersarang, menjadikannya alat yang sangat diperlukan untuk pembangunan web moden.

Menyediakan Penghala Reaksi

Untuk bermula, pasang Penghala Reaksi menggunakan npm atau benang:

npm install react-router-dom

Salin selepas log masuk

atau

yarn add react-router-dom

Salin selepas log masuk

Komponen Laluan, Suis, Pautan dan NavLink

Penghala React menawarkan beberapa komponen penting untuk menentukan laluan dan mengendalikan navigasi.

Komponen Laluan

Komponen Laluan memetakan laluan URL ke komponen tertentu. Ia membenarkan pemaparan bersyarat komponen berdasarkan URL semasa.

Contoh:

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

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

export default App;

Salin selepas log masuk

Komponen Tukar

Komponen Suis memastikan bahawa hanya laluan padanan pertama dipaparkan. Ini menghalang berbilang laluan daripada dipaparkan secara serentak.

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 = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route component={NotFound} />
    </Switch>
  </Router>
);

export default App;

Salin selepas log masuk

Komponen Pautan

Komponen Pautan digunakan untuk membuat pautan navigasi dalam aplikasi anda. Tidak seperti teg sauh tradisional, komponen Pautan tidak menyebabkan muat semula halaman penuh, 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 = () => (
  <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;

Salin selepas log masuk

Komponen NavLink

Komponen NavLink memanjangkan Pautan dengan keupayaan penggayaan tambahan berdasarkan laluan aktif. Ia berguna untuk mencipta menu navigasi dengan penggayaan keadaan 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 = () => (
  <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;

Salin selepas log masuk

Teknik Laluan Lanjutan

Laluan Bersarang

Laluan bersarang membenarkan penciptaan reka letak yang kompleks dengan sub-navigasi, yang penting untuk membina aplikasi berskala dengan struktur hierarki.

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;

Salin selepas log masuk

Penghalaan Dinamik

Penghalaan dinamik adalah penting untuk membuat laluan berdasarkan parameter dinamik, seperti ID pengguna atau ID produk. Ia membenarkan seni bina aplikasi yang fleksibel dan berskala.

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;

Salin selepas log masuk

Parameter Laluan

Parameter laluan membenarkan penangkapan nilai daripada URL untuk digunakan dalam komponen anda. Ciri ini meningkatkan sifat dinamik aplikasi 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;

Salin selepas log masuk

Pengawal Laluan dan Lencongan

Melindungi Laluan

Pengawal laluan mengehadkan akses ke laluan tertentu berdasarkan syarat, seperti pengesahan pengguna, memastikan kawalan akses selamat dalam aplikasi anda.

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;

Salin selepas log masuk

Melaksanakan Ubah hala dalam Penghala Reaksi

Ubah hala menavigasi pengguna secara terprogram ke laluan berbeza, meningkatkan pengalaman pengguna dengan menghalakan mereka ke kandungan yang sesuai berdasarkan konteks.

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;

Salin selepas log masuk

Dalam contoh ini, melawati /old-page secara automatik mengubah hala pengguna ke /new-page.

Kesimpulan

Menguasai Penghala React adalah penting untuk mereka bentuk sistem navigasi yang teguh dan berskala dalam aplikasi React. Memahami cara menyediakan laluan, menggunakan komponen teras seperti Laluan, Suis, Pautan dan NavLink serta melaksanakan teknik lanjutan seperti laluan bersarang, penghalaan dinamik, parameter laluan dan pengawal laluan akan membolehkan anda mencipta aplikasi satu halaman yang canggih. Sebagai pembangun peringkat arkitek, keupayaan anda untuk mereka bentuk seni bina penghalaan berskala akan meningkatkan dengan ketara kebolehselenggaraan dan kecekapan aplikasi anda, membawa pasukan anda ke arah pelaksanaan projek yang berjaya.

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