Morioh
Login
CODE VN

CODE VN

4 months ago

Điều hướng động với React Router

Trong React Router, điều hướng động đề cập đến khả năng tạo và xử lý các tuyến đường dựa trên dữ liệu động trong ứng dụng React của bạn. Điều này cho phép trải nghiệm điều hướng linh hoạt và thân thiện hơn với người dùng, thích ứng với các nội dung và tình huống khác nhau.

Trong hướng dẫn này, chúng ta sẽ khám phá sự phức tạp của điều hướng động với React Router, kèm theo các ví dụ thực tế

Tìm hiểu kiến ​​thức cơ bản về bộ định tuyến React

Các thành phần của React Router

React Router hoạt động trên các thành phần chính tạo thành xương sống của điều hướng:

// Basic Configuration with React Router
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

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

Thiết lập cơ bản này hiển thị các thành phần BrowserRouter, Link và Route đang hoạt động.

Định tuyến tĩnh và động

định tuyến tĩnh

Định tuyến tĩnh bao gồm các đường dẫn được xác định trước cho người dùng, cung cấp cấu trúc đơn giản. Trong ví dụ trên, '/home' và '/about' là các tuyến tĩnh.

Định tuyến động

Hãy xem xét một tình huống trong đó hồ sơ người dùng cần được hiển thị động. Việc sử dụng định tuyến động cho phép chúng tôi tạo một tuyến đường như '/user/:id', trong đó ':id' đại diện cho mã định danh duy nhất của người dùng:

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

const UserProfile = ({ match }) => {
  return <p>User ID: {match.params.id}</p>;
};

const App = () => {
  return (
    <Router>
      <div>
        <Route path="/user/:id" component={UserProfile} />
      </div>
    </Router>
  );
};

Việc truy cập '/user/123' sẽ tự động hiển thị hồ sơ người dùng cho người dùng có ID 123.

Điều hướng theo chương trình với React Router

Tận dụng JavaScript để điều hướng

React Router tạo điều kiện thuận lợi cho việc điều hướng theo chương trình, rất quan trọng đối với các tình huống như xác thực người dùng. Ví dụ: hãy xem xét thành phần PrivateRoute chuyển hướng người dùng chưa được xác thực:

// Programmatic Navigation with React Router
import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = /* Check user authentication here */;

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

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <PrivateRoute path="/dashboard" component={Dashboard} />
      </div>
    </Router>
  );
};

Trong ví dụ này, PrivateRoute đảm bảo rằng người dùng sẽ được chuyển hướng đến trang đăng nhập nếu không được xác thực.

Phần kết luận

Với hướng dẫn này, bạn hiện đã thành thạo việc điều hướng động với React Router.

1.05 GEEK