Ռուտերի ավելացում React Router-ում

Ռուտերներին մի փոքր ծանոթանալով՝ մենք կարող ենք դրանցից մեկն ավելացնել հավելվածին:

Բայց նախ պետք է մի փոքր մաքրել մեր հավելվածի կաղապարը, որը մենք ստեղծել ենք նախորդ դասերին: Ավելի կոնկրետ՝ կզբաղվենք src պանակով: Դուրս նետեք դրանից assets պանակը, App.css, App.jsx ֆայլերը: Ընդհանուր առմամբ, ձեզ մոտ դրանում կմնան միայն main.jsx և index.css:

Բացեք index.css և ամբողջությամբ մաքրեք այն: Թողեք այն դատարկ:

Այժմ զբաղվենք մեր գլխավոր main.jsx ֆայլով: Դրանում մենք կունենանք այսպիսի կոդ:

main.jsximport './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>

  </React.StrictMode>
);

Եվ այժմ մենք կարող ենք ավելացնել ռուտեր: Մենք կօգտագործենք BrowserRouter, քանի որ այն ամենից հաճախ օգտագործվում է վեբ-հավելվածներում: Եվ չմոռանանք ժամանակակից շարահյուսության մասին: Ավելացնենք իմպորտի տողը:

main.jsximport {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';

Այնուհետև, ստեղծենք router հաստատունը և ստեղծենք մեր BrowserRouter-ը իմպորտների տողերից հետո: Եկեք դա անենք այնպես, որ գլխավոր էջում ցուցադրվի div տարր 'Hello Router!' մակագրությամբ: Դրա համար գրենք գլխավոր էջի հասցեն և տարրը, որը պատրաստվում ենք ցուցադրել:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <div>Hello Router!</div>,
  },
]);

Մեզ անհրաժեշտ է նաև ավելացնել RouterProvider կոմպոնենտը և գրել վերևում մեր ստեղծած ռուտերը: Այն ընդունում է ռուտերի բոլոր օբյեկտները, 렌더ում է մեր հավելվածը և միացնում է այլ API-ներ:

main.jsxReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Լրիվ կոդը կունենա հետևյալ տեսքը:

main.jsximport './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <div>Hello world!</div>,
  },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Պահպանենք փոփոխությունները: Շնորհավորում եմ: Մեր հավելվածն այլևս չի սխալվում: Այժմ, եթե այն գործարկենք, ապա բրաուզերի գլխավոր էջում մենք կտեսնենք 'Hello Router!':