Как запустить React-приложение на сервере (Xampp)?

Александр, Unexpected Application Error! 404 Not Found

Как запустить React-приложение на сервере (Xampp)?

Александр, я так делал, прописал PUBLIC_URL=/build/ - перезапустил build-сборку, поместил её в htdocs(с xamp-a запускаю) - но без результата..

Как запустить React-приложение на сервере (Xampp)?

Александр, понял что проблема в путях - что index.html и .css/,js файлы идут через разные пути и в этом проблема
но если честно, что конкретно писать в PUBLIC_URL я не понял, там про это пару предложений написано

Как запустить React-приложение на сервере (Xampp)?

Александр, создал файл .env в корне приложения, написал PUBLIC_URL=/названиеприложения/ - выдаёт Unexpected Application Error!
404 Not Found

Как запустить React-приложение на сервере (Xampp)?

Kentavr16, webpack
ну в обычной webpack-сборке есть webpack.config.js, где всё и настраивается
а у cra надо посмотреть где это всё настраивается. Я конечно думал как то попроще можно это сделать. Ну на "боевом" сервере потестить приложение
nginx похоже нужно разбирать

Как запустить React-приложение на сервере (Xampp)?

Я Vite ещё не изучал, через create-react-app делал

Ошибки в react-router?

Да, понял, исправил уже. Но я вообще хочу новый синтаксис использовать, во что мне тогда тут оборачивать все роуты, чтобы NavLink работал?

import { RouterProvider, createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
    const router = createBrowserRouter(
        createRoutesFromElements(

            <Route 
                path="/" 
                element={<Main filterCardsText={filterCardsText} isTitlePending={isTitlePending} />} 
            >

                <Route 
                    path="more" 
                    element={<More />} 
                /> 
                <Route 
                    path="all-cards" 
                    element={<Cards />} 
                /> 

            </Route> 

                
        )
      )


    return (
        <div className="wrapper">


            <Header setFilterCardsText={setFilterCardsText} startTitleTransition={startTitleTransition} />


                <RouterProvider router={router} />


            <Footer />

        </div>

    )

Ошибки в react-router?

о, не знал, интересно
А если я использую новый роутинг, во что мне оборачивать?

import { RouterProvider, createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
    const router = createBrowserRouter(
        createRoutesFromElements(

            <Route 
                path="/" 
                element={<Main filterCardsText={filterCardsText} isTitlePending={isTitlePending} />} 
            >

                <Route 
                    path="more" 
                    element={<More />} 
                /> 
                <Route 
                    path="all-cards" 
                    element={<Cards />} 
                /> 

            </Route> 

                
        )
      )


    return (
        <div className="wrapper">


            <Header setFilterCardsText={setFilterCardsText} startTitleTransition={startTitleTransition} />


                <RouterProvider router={router} />


            <Footer />

        </div>

    )

Не отправляется форма в react-hook-form?

szQocks, да, если честно хз как это получилось, но я паттерн проверки не тот скопировал - вот этот работает /^[a-zA-Z0-9]+@(?:[a-zA-Z0-9]+\.)+[A-Za-z]+$/

Не отправляется форма в react-hook-form?

szQocks, да, почему то валидация не проходит. Но я ввожу корректный email, по паттерну. Если вводить просто символы, не по паттерну - он выдаст предупреждение "Write your email, please" и валидация не пройдёт. А если вводить по паттерну, но предупреждений не будет, но и валидация всё равно не проходит

Не отправляется форма в react-hook-form?

szQocks, метод убрал, хотя хз как он влияет, сделал

<button onClick={handleSubmit(onSubmit)}>GO</button>

без изменений, когда кликаешь на GO - почему то курсор снова и снова появляется во 2м поле, где почта, а onSubmit не вызывается

Swiper-slider c cube-эффектом перекрывает чётные слайды?

Виталий Першин, да, почему то в firefox всё норм. А в хроме нет, чётные слайды не кликабельные
как такое может быть

Swiper-slider c cube-эффектом перекрывает чётные слайды?

Виталий Першин, хм, посмотрю. А в хроме не пробовали смотреть? Хотя не знаю как браузер на такое влиять может

Swiper-slider c cube-эффектом перекрывает чётные слайды?

Виталий Першин, 2й, 4й и 6й слайды у вас нормально нажимаются? Быть не может, там же курсор не реагирует никак на кнопку
И в консоли видно что конкретно эти слайды перекрываются. А другие(1,3,5) нет

В чём плюсы делать React-Routing через createBrowserRouter/defer/loader версии 6.4?

Kentavr16, да и там эта конструкция suspense/await с принятием результата запроса внутри - там так запутанно, что читаемости не добавляется конечно
Но ладно, раз обновили router, то наверное нужно в теме быть

В чём плюсы делать React-Routing через createBrowserRouter/defer/loader версии 6.4?

Kentavr16, да может и необязательно, но если загружать данные в самих компонентах - кода намного меньше и он проще. А тут ну как бы да, выносишь, но при этом кода больше, он сложнее, нужно учить новые компоненты, хуки, и тд. Ну я выучил это всё, чтобы за изменениями следить просто, но упрощения тут мало

Ошибка с роутингом по клику на карточку (react-router6)?

export let getCharackters = async () => {
return await getResource('https://gateway.marvel.com:--мойAPIkey--')
}
да тут с роутингом именно проблема. До него все функции работали, так что это с роутингом что-то. Я прочитал что 'destroy is not a function' может появляться если нужно что-то размонтировать, а ты этого не делаешь. Но я не знаю, я несколько раз просматривал код, вроде всё логично

но всё равно - вбиваешь в адресную строку нужный путь(charackters/айдишник) + enter = работает
а при кликах ошибка

Как задать stroke-dasharray/offset - для сложных svg-элементов?

IvanU7n, хм, а как с ней играться? через какие свойства

Какие JS-библиотеки можно использ. для такой анимации?

mletov, странно только что он Scrollax.js и Delighter.js не показал, они там есть

Какие JS-библиотеки можно использ. для такой анимации?

а как вы это сделали? Какое-то расширение для браузера?