Javascript chuyển trang

Question

Để ứng dụng React hoạt động mượt mà hơn, đẹp hơn, trải nghiệm người dùng tốt hơn,. thì nên có thêm các hiệu ứng hoạt hình, chuyển tiếp

Nội dung chính Show

Cấu hình React Router (v6)
Thành phần chuyển tiếp
Thành phần CSSTransition
Thành phần chuyển đổi Switch
Thành phần nhóm chuyển tiếp
Chuyển đổi giữa các trang

Bài viết này mình sẽ hướng dẫn các bạn sử dụng thư viện React Transition Group để tạo hiệu ứng chuyển đổi nhanh chóng một cách nhanh chóng

Để tiện thì mình sẽ demo code trên stackblitz. com. Trong ví dụ sẽ sử dụng cả React Router v6 để cấu hình nhiều trang và có hiệu ứng chuyển tiếp giữa các trang. Dưới đây là danh sách các phụ thuộc sử dụng trong ví dụ demo

Cấu hình React Router (v6)

React Transition Group cung cấp cho chúng ta 4 Component để hỗ trợ việc tạo quá trình chuyển đổi, do đó mình sẽ tạo ra 4 trang để demo và có sự chuyển tiếp giữa các trang

Tạo ra 4 chức năng Component trống đại diện cho mỗi trang là

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

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
1, import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
2, import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
3, import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
4. Ví dụ Component Home



import React from 'react';

export default function Home() {
    return (
        <h1>Home Pageh1>
    )
}
Sau đó cấu hình Router cho website tại 
import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
5
import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
Sau khi cấu hình xong chúng ta có 1 website đơn giản gồm 4 trang và có menu để chuyển trang
Tiếp theo mình sẽ demo các Component mà React Transition Group cung cấp
Thành phần chuyển tiếp
Use to create transition for an Component when it change status (thường là chuyển đổi giữa mount và unmount)
Ví dụ sau sẽ tạo hiệu ứng chuyển tiếp khi Thành phần xuất hiện (nhập) và biến mất (thoát)



import React, { useState } from 'react';
import { Transition } from 'react-transition-group';

// Tạo một biến lưu thời gian chạy transition
const duration = 1000; // 1000ms = 1s

// Có 4 trạng thái chính của một Transition
// => Tạo ra một object để style cho các trạng thái này
const transitionStyles = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 },
};

export default function Home() {
  // Tạo state để ẩn hiện Component
  const [isShow, setShow] = useState(false);

  return (
    <div>
      <h1>Homeh1>

      {/* Sử dụng component Transition để tạo hiệu ứng transition */}
      <Transition in={isShow} timeout={duration}>
        {/* Nội dung bên trong là 1 hàm với tham số là state của Transition (4 state) */}
        {(state) => (
          {/* Component sẽ hiển thị (hoặc biến mất) dựa vào state isShow */}
          {/* Sử dụng inline style để tạo style transition */}
          <div
            style={{
              transition: `opacity ${duration}ms ease-in-out`,
              opacity: 0,
              ...transitionStyles[state],
            }}
          >
            Component content
          div>
        )}
      Transition>

      <br />

      {/* Bấm nút để hiển thị Component */}
      <button onClick={() => setShow(true)}>Showbutton>

      {/* Bấm nút để ẩn Component */}
      <button onClick={() => setShow(false)}>Hidebutton>
    div>
  );
}
Thành phần CSSTransition
Use CSS to create Transition. Thành phần này tương tự Component Transition và kế thừa các thuộc tính của Component Transition
Ví dụ sau việc tạo hiệu ứng tương tự như ví dụ trước, nhưng sử dụng CSS ở một tệp riêng
import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
// Nhúng CSS từ file vào Component
import './style.css';

export default function Page1() {
  // Tạo state để ẩn hiện Component
  const [isShow, setShow] = useState(false);

  return (
    <div>
      <h1>Page 1h1>

      {/* Sử dụng component CSSTransition để tạo hiệu ứng transition */}
      {/* Chú ý classNames my-node sẽ được sử dụng ở file CSS để style */}            
      <CSSTransition in={isShow} timeout={1000} classNames="my-node">
        <div className="content">Component contentdiv>
      CSSTransition>

      <br />

      <button onClick={() => setShow(true)}>Showbutton>
      <button onClick={() => setShow(false)}>Hidebutton>
    div>
  );
}
/* Thêm CSS để ban đầu ẩn luôn Component */
.content {
  opacity: 0;
}

/* Sử dụng class my-node và kèm thêm các suffix để style */

/* -enter: Component bắt đầu xuất hiện */
.my-node-enter {
  opacity: 0;
}

/* -enter-active: Component đang xuất hiện */
.my-node-enter-active {
  opacity: 1;
  transition: opacity 1000ms;
}

/* -enter-done: Component kết thúc hiệu ứng xuất hiện */
.my-node-enter-done {
  opacity: 1;
}

/* -exit: Component bắt đầu biến mất */
.my-node-exit {
  opacity: 1;
}

/* -exit-active: Component đang biến mất */
.my-node-exit-active {
  opacity: 0;
  transition: opacity 1000ms;
}

/* -exit-done: Component kết thúc hiệu ứng biến mất */
.my-node-exit-done {
  opacity: 0;
}
Thành phần chuyển đổi Switch
Sử dụng khi muốn điều khiển công việc kết xuất Thành phần theo trạng thái với 2 chế độ 
import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
6 và import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
7 (sử dụng kết hợp với Chuyển đổi hoặc CSSTransition)
Ví dụ sau sẽ tạo quá trình chuyển đổi khi thay đổi trạng thái của Thành phần, nội dung của Thành phần thay đổi kèm theo hiệu ứng chuyển đổi
import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
2____13Thành phần nhóm chuyển tiếp
Sử dụng để tạo hiệu ứng chuyển đổi cho 1 danh sách (danh sách) các Thành phần. Ví dụ demo mình lấy luôn trên tài liệu của thư viện nhưng tối giản đi một chút



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

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
4import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
5Chuyển đổi giữa các trang
Để tạo chuyển tiếp giữa các trang, ta có thể sử dụng Component TransitionGroup. Tuy nhiên, cần phải có khóa phân biệt giữa các Thành phần được hiển thị. Mình sử dụng đường dẫn để làm key, do đó cần sử dụng thêm hook 
import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
8 của React Router để lấy ra đường dẫn
Hook 
import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
8 chỉ được sử dụng khi nằm trong Component import React, { useState } from 'react';
import { Transition } from 'react-transition-group';

// Tạo một biến lưu thời gian chạy transition
const duration = 1000; // 1000ms = 1s

// Có 4 trạng thái chính của một Transition
// => Tạo ra một object để style cho các trạng thái này
const transitionStyles = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 },
};

export default function Home() {
  // Tạo state để ẩn hiện Component
  const [isShow, setShow] = useState(false);

  return (
    <div>
      <h1>Homeh1>

      {/* Sử dụng component Transition để tạo hiệu ứng transition */}
      <Transition in={isShow} timeout={duration}>
        {/* Nội dung bên trong là 1 hàm với tham số là state của Transition (4 state) */}
        {(state) => (
          {/* Component sẽ hiển thị (hoặc biến mất) dựa vào state isShow */}
          {/* Sử dụng inline style để tạo style transition */}
          <div
            style={{
              transition: `opacity ${duration}ms ease-in-out`,
              opacity: 0,
              ...transitionStyles[state],
            }}
          >
            Component content
          div>
        )}
      Transition>

      <br />

      {/* Bấm nút để hiển thị Component */}
      <button onClick={() => setShow(true)}>Showbutton>

      {/* Bấm nút để ẩn Component */}
      <button onClick={() => setShow(false)}>Hidebutton>
    div>
  );
}
0 nên chúng ta phải tạo thêm 1 Component con để tạo transition. Create add a Component is import React, { useState } from 'react';
import { Transition } from 'react-transition-group';

// Tạo một biến lưu thời gian chạy transition
const duration = 1000; // 1000ms = 1s

// Có 4 trạng thái chính của một Transition
// => Tạo ra một object để style cho các trạng thái này
const transitionStyles = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 },
};

export default function Home() {
  // Tạo state để ẩn hiện Component
  const [isShow, setShow] = useState(false);

  return (
    <div>
      <h1>Homeh1>

      {/* Sử dụng component Transition để tạo hiệu ứng transition */}
      <Transition in={isShow} timeout={duration}>
        {/* Nội dung bên trong là 1 hàm với tham số là state của Transition (4 state) */}
        {(state) => (
          {/* Component sẽ hiển thị (hoặc biến mất) dựa vào state isShow */}
          {/* Sử dụng inline style để tạo style transition */}
          <div
            style={{
              transition: `opacity ${duration}ms ease-in-out`,
              opacity: 0,
              ...transitionStyles[state],
            }}
          >
            Component content
          div>
        )}
      Transition>

      <br />

      {/* Bấm nút để hiển thị Component */}
      <button onClick={() => setShow(true)}>Showbutton>

      {/* Bấm nút để ẩn Component */}
      <button onClick={() => setShow(false)}>Hidebutton>
    div>
  );
}
1
import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
0Sau đó reback cấu hình các route ở 
import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
5 bằng cách sử dụng Component trên
import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';
import Page1 from './pages/page1/Page1';
import Page2 from './pages/page2/Page2';
import Page3 from './pages/page3/Page3';

export default function App() {
  return (
    <BrowserRouter>
      {/* Tạo menu */}
      <nav
        style={{
          borderBottom: 'solid 1px',
          padding: '1rem 0',
        }}
      >
        <Link to="/">HomeLink>
        {' | '}
        <Link to="/page1">Page 1Link>
        {' | '}
        <Link to="/page2">Page 2Link>
        {' | '}
        <Link to="/page3">Page 3Link>
      nav>

      {/* Cấu hình Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      Routes>
    BrowserRouter>
  );
}
0Tham khảo toàn bộ mã mẫu tại đây. https. // stackblitz. com/edit/react-transition-group-react-router-v6?file=src/App. js

programming javascript

Javascript chuyển trang

Cấu hình React Router (v6)

Thành phần chuyển tiếp

Thành phần CSSTransition

Thành phần chuyển đổi Switch

Thành phần nhóm chuyển tiếp

Chuyển đổi giữa các trang

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội