React Router

Question 1

Установите библиотеку для работы с роутингом React Router:

Answer 1

pnpm add react-router
Документация: https://reactrouter.com/

1. При подключении роутера необходимо обернуть компоненту в BrowserRouter:
   import { BrowserRouter } from “react-router”

createRoot(document.getElementById(“root”)!).render(

<BrowserRouter>
<Provider store={store}>
<App></App>
</Provider>
</BrowserRouter>

)

2. Создание Routes и Route:
   export const Path = {
   Main: ‘/’,
   Login: ‘login’,
   NotFound: ‘*’,
   } as const

export const Routing = () => (

<Routes>
<Route path={Path.Main} element={<main></main>} />
<Route path={Path.Login} element={<Login></Login>} />
<Route path={Path.NotFound} element={<PageNotFound></PageNotFound>} />
</Routes>

)

splats - маршруты с * в пути, соответствующие любому URL, который не был сопоставлен с другими маршрутами. Это полезно для отображения страницы 404 и обработки динамических путей.