React? ?? ???

React?

?? ???? ???????? ???? ??? ?? ??? ???? ??? ???? ??? ???? ??? ? ?? ??? ?????. ?? ?? ??? ??, API ?? ?? ?? URL ????? ???? ??? ??? ???? ? ????.

?? ???? ??? ???? API?? ??? ???? ?? ????? ?? ??? ?? ??? ??? ?? ???? ??? ?? ??? ?? ??? ? ?? ??????? ??? ? ?? ?????.

---

React?? ?? ???? ???? ??

React Router? React ???????? ???? ???? ?? ????????. ???? ??? ?? ?? ??? ?? ??? ??? ? ?? ?? ???? ??????.

---

?? ???? ?? ??

1. ?? ?? ????:

   • ?? ?? ????? ???? ???? ???? ?? ???? ??? ??? ? ????. ??? ????? /user/:userId? ?? URL? ??? ? ????. ??? :userId? URL? ?? ?????.

2. ????? ?? ??:

   • React Router? useNavigate ?? ?? ? ???? ??????? ???? ??? ???? ??? ??? ??? ? ????. ???????.

3. ??? ???:

   • ?? ???? ??? ??? ??, ?? ??? ?? ?? ?? ? ?????? ??? ?? ???? ??? ?? ????.

4. ?? ?? ??:

   • ?? ???? ???? ??? ?? ??? ?? ??? ? ???? ??? ?? ?? ??? ???? ?????? ??? ?? ? ????.

---

React? ?? ??? ??

? ???? ?? ????? ???? ??? ???? URL? ???? ???? ????? ??? ?????.

??? ?:

1. ????? ?? ?? ?? ??:
   • ???? ??? ?? ?? ????? ?? ??? :parameter? ?????.

import React from 'react';
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

const UserProfile = () => {
  const { userId } = useParams();  // Access dynamic parameter from the URL
  return <h2>User Profile for user: {userId}</h2>;
};

const App = () => {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li><Link to="/user/1">User 1</Link></li>
          <li><Link to="/user/2">User 2</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/user/:userId" element={<UserProfile />} /> {/* Dynamic route */}
      </Routes>
    </BrowserRouter>
  );
};

export default App;

??:

• UserProfile ?? ??? useParams? ???? URL?? userId ????? ?????.
• ??? ???? ???? /user/1 ?? /user/2? ???? ???? ??? ??? ???? ??????.

---

1. Navigate Hook? ??? ????? ?? ???:
   • useNavigate? ?? ?? ?? ?? ???? ?????. ?? ???? ??? ???? ?? ??? ?? ????? ???? ?? ??? ??? ? ????.

import React from 'react';
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';

const Home = () => {
  const navigate = useNavigate();

  const goToUserProfile = (id) => {
    navigate(`/user/${id}`);
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={() => goToUserProfile(1)}>Go to User 1</button>
      <button onClick={() => goToUserProfile(2)}>Go to User 2</button>
    </div>
  );
};

const UserProfile = ({ userId }) => {
  return <h2>User Profile for user: {userId}</h2>;
};

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user/:userId" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

??:

• ? ?? ????? ??? ??? ? useNavigate? ???? ??? ??? ???? ???? ?????.
• UserProfile ?? ??? useParams? ???? URL?? userId? ???? ?? ???? ??????.

---

1. ??? ?? ???:
   • ??? ???? ??? ???? ?? ?? ??? ?? ???? ??? ???? ? ????.

import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';

const PrivateRoute = ({ isAuthenticated, children }) => {
  return isAuthenticated ? children : <Navigate to="/login" />;
};

const Dashboard = () => <h2>Dashboard - Only accessible when logged in</h2>;
const Login = () => <h2>Login Page</h2>;

const App = () => {
  const isAuthenticated = false;  // Change this value to test

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route
          path="/dashboard"
          element={
            <PrivateRoute isAuthenticated={isAuthenticated}>
              <Dashboard />
            </PrivateRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

??:

• PrivateRoute ?? ??? ???? ?????? ???? ?? ?? ?????. ???? ???? ?? ?? ??? ???? ???????.
• ???? ??? isAuthenticated ??? true? ???? ???? ? ????.

---

1. ?? ?? ??(?? ??):
   • React.lazy ? Suspense? ???? ??? ? ??? ?? ?? ??? ???? ???? ?????? ??? ???? ? ????.

import React, { Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// Lazy load components
const Home = React.lazy(() => import('./Home'));
const Dashboard = React.lazy(() => import('./Dashboard'));

const App = () => {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
};

export default App;

??:

• ? ? ???? ?? ??? React.lazy? ???? ?? ?????. ?, ??? ???? ?? ?????.
• ????? ???? ?? ?? UI(
  ?? ?...
  )? ????? ?????.

---

?? ???? ??

• ??: ?? ? ?? ?? ??? ???? ??? ????? ???? ??? ?????.
• ???: ?? ???? ???? ??? ??, ?? ?? ???, API ?? ?? ? ??? ??? ??? ?? ??? ???? ??? ? ????.
• ???: ??????? ???? ?? ?? ???? ?? ??? SPA ?? ??? ??? ??? ??????? ?? ??? ??? ??? ???? ? ??? ???.

---

??

React? ?? ???? ???? ?? ???? ??? ??????? ?????. ?? ?? ????, ????? ?? ??, ??? ??? ? ?? ??? ???? ??? ?? ???? ?????? ??? ?? ???? ??? React ?? ?? ? ????. React Router? React?? ?? ???? ?? ??? ? ?? ??? ??? ???, ???? ?? ??? ??????? ?? ??? ? ????.

---

? ??? React?? ?? ??? ?????: ???? ?? ??? ?????? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!