0

Когда я пытаюсь перейти по адресу http://127.0.0.1:3000/order/1 через ссылку роутера или через navigate(), то все работает хорошо, но когда я обновляю страницу или напрямую меня строку браузера, чтобы перейти на страницу с параметром, то я всегда получаю ошибку введите сюда описание изображения

Это происходит, только на страницу с параметрами localhost/page/:param

Мой компонент с основной логикой:

import * as React from "react";
import { useCallback } from "react";
import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
import Layout from "./shared/Layout";
import { publicRoutes } from "./routes";
import http from "./api/http";
import { ToastContainer, toast } from "react-toastify";
import "!style-loader!css-loader!react-toastify/dist/ReactToastify.css";
export default function Application() {
  const location = useLocation();
  const [CurrentComponent, setCurrentComponent] = React.useState<React.ReactNode | null>(null);
  const [currentUrl, setCurrentUrl] = React.useState(location.pathname);
  React.useEffect(() => {
    if (!localStorage.getItem("cart_id") && !localStorage.getItem("token")) {
      const fetchAccount = async () => {
        await http
          .post("/api/v1/cart/create_cart")
          .then((response) => {
            localStorage.setItem("cart_id", response?.data?.id);
          })
          .catch((error) => console.error(error));
      };
      fetchAccount();
    }
  }, []);

  React.useEffect(() => {
    const getRoute = async () => {
      // получаем имя нужного компонента любым способом
      let url: null | string = null;

      for (let i = 0; i < publicRoutes.length; i++) {
        if (location.pathname.includes(publicRoutes[i]?.simplePath || publicRoutes[i]?.path)) {
          setCurrentUrl(publicRoutes[i]?.path)

          url = publicRoutes[i]?.prjPath;
          break;
        }
      }

      if (url === null) {
        url = "NotFoundPage";
      }
      // загружаем компонент по его названию
      const CurrentComponent = React.lazy(() => import("./routes/" + url));

      // записываем компонент в состояние
      setCurrentComponent(CurrentComponent);
    };

    getRoute();
  }, [location]);
  

  React.useEffect(() => {
    const timeStamp = Number(localStorage.getItem("timeStamp"));
    if (Date.now() - timeStamp >= 86400000) {
      localStorage.removeItem("timeStamp");
      localStorage.removeItem("token");
    }
  }, []);

  // const getPublicRoutes = useCallback(
  //   () =>
  //     publicRoutes.map((route) => (
  //       <Route key={route.path} path={route.path} element={route.element} />
  //     )),
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  //   [publicRoutes]
  // );

  return (
    <React.Suspense>
      <Layout>
        <ToastContainer hideProgressBar={true} theme="colored" />{" "}
        {/* уведомления */}
        <Routes>
          <Route
            path={currentUrl}
            element={CurrentComponent ? <CurrentComponent /> : null}
          />
        </Routes>
      </Layout>
    </React.Suspense>
  );
} 

webpack.common.js

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, '..', './src/index.tsx'),
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
    output: {
        path: path.resolve(__dirname, '..', './build'),
        filename: 'bundle.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '..', './src/index.html'),
        }),
        new CleanWebpackPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-typescript', '@babel/preset-env'],
                        },
                    },
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.(?:ico|gif|jpg|jpeg|png|svg|webp)$/,
                type: 'asset/resource',
            },
            {
                test: /\.(woff(2)?|eot|ttf|otf|)$/,
                type: 'asset/inline',
            },
        ],
    },
};

1 ответ 1

0

Это происходит потому, что при прямом переходе по адресу роутер ещё не заполнен, он начинает заполняться уже после вызова страницы, соответственно ничего не загружается. Если же переход идёт через navigate, то соответственно все пути уже в роутере, и нужная страница грузится.

Через map всех путей подобную задачу не решить. Примерный порядок действий - перехватить url, получить необходимый для загрузки компонент для полученного url, и, соответственно, загрузить его.

Для начала, чтобы роутер не выкидывал ошибок, он должен увидеть Route с атрибутом path соответствующим текущему url:

const location = useLocation();
const [currentUrl, setCurrentUrl] = useState(location.pathname);
...
<Route path={currentUrl} />

Далее, нам нужно получить компонент, который должен быть загружен. Для этого понадобится какой-нибудь контроллер на сервере, который в обмен на полученный url выдаст в ответ имя нужного компонента, либо сделать кэш-файл, из которого можно будет получить имя нужного компонента прямо на клиентской части. Так или иначе, нужен компонент, например CurrentComponent:

    const [CurrentComponent, setCurrentComponent] = useState();
...
    <Route
        path={currentUrl}
        element={CurrentComponent ? <CurrentComponent /> : null}
    />

И, наконец, нужно определить и загрузить этот самый компонент через lazy при смене url:

 const location = useLocation();
 useEffect(() => {

    const getRoute = async () => {
        // получаем имя нужного компонента любым способом
        const response = ...;
            
        // загружаем компонент по его названию
        const CurrentComponent = lazy(() =>
            import("./" + response)
        );
            
        // записываем компонент в состояние
        setCurrentComponent(CurrentComponent);
    };
    
    getRoute();
}, [location]);

И, так как используем lazy, оборачиваем роутер в Suspense:

<Suspense>
    <Routes>
        <Route
            path={currentUrl}
            element={CurrentComponent ? <CurrentComponent /> : null}
        />
    </Routes>
</Suspense>

Итоговый результат:

import React, { useEffect, useState, Suspense, lazy } from 'react';
import {
    BrowserRouter as Router,
    Routes,
    Route,
    useLocation
} from 'react-router-dom';
...
const location = useLocation();

const [CurrentComponent, setCurrentComponent] = useState();
const [currentUrl, setCurrentUrl] = useState(location.pathname);

useEffect(() => {
    
    const getRoute = async () => {
        // получаем имя нужного компонента любым способом
        const response = ...;
                
        // загружаем компонент по его названию
        const CurrentComponent = lazy(() =>
            import("./" + response)
        );
                
        // записываем компонент в состояние
        setCurrentComponent(CurrentComponent);
    };
        
    getRoute();
}, [location]);

<Suspense>
    <Routes>
        <Route
            path={currentUrl}
            element={CurrentComponent ? <CurrentComponent /> : null}
        />
    </Routes>
</Suspense>
2
  • Обновил описание, сделал также, как показано у тебя, но результат такой же как и был при обновлении страницы на роуте с параметром приходит такая же ошибка 2 авг 2022 в 14:07
  • Я когда ставил debugger, то у меня даже до useEffect не доходило, а уже ошибка прилетала 2 авг 2022 в 14:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.