Неожиданная ошибка приложения! 404 не найден в App.js

Я получил сообщение об ошибке «Неожиданная ошибка приложения! 404 не найден», когда открыл localhost:3000/chunk в своем браузере.

Ниже приведен мой код для App.js:

function App() {
  
  const { currentUser } = useContext(AuthContext);

  const queryClient = new QueryClient();

  const Layout = () => {
    return (
      <QueryClientProvider client = {queryClient}>
        <div className = "page">
          Layout
        </div>
      </QueryClientProvider>
    );
  };

  const ProtectedRoute = ({ children }) => {
    if (!currentUser) {
      return <Navigate to = "/login" />;
    }
    return children;
  };

  const router = createBrowserRouter([
    {
      path: "/",
      element: (
        <ProtectedRoute>
          <Layout />
        </ProtectedRoute>
      ),
      children: [
        {
          path: "/",
          element: <Home />,
        },
        {
          path: "/chunk/:id",
          element: <Chunk />,
        },
      ],
    },
    {
      path: "/login",
      element: <Login />,
    },
    {
      path: "/register",
      element: <Register />,
    },
  ]);
  
  return (
    <div>
      <RouterProvider router = {router} />
    </div>
  );
}

export default App;

Когда я открыл консоль в браузере, появилось сообщение об ошибке: «Нет маршрутов, соответствующих местоположению «/chunk»».

Можете ли вы создать стек блиц приведенного выше кода?

Balaji 03.06.2024 11:12
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
85
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сообщение об ошибке ясно указывает на проблему: в App.js у вас есть path: "/chunk/:id", но вы переходите к /chunk, который не определен. Поэтому «Нет маршрутов, соответствующих местоположению /chunk»

Из React Router

Динамические сегменты

Если сегмент пути начинается с :, он становится «динамическим сегментом». Когда маршрут соответствует URL-адресу, динамический сегмент будет проанализирован из URL-адреса и предоставлен как params другим API-интерфейсам маршрутизатора.

Если это динамическая страница, URL-адрес должен быть, например, /chunk/1.

Если это должна быть статическая страница, вам следует изменить "/chunk/:id" на "/chunk".

Другие вопросы по теме