Нет маршрутов, соответствующих местоположению "/"

Я пытался нажать маршрут «/», чтобы отобразить компонент Home. Компонент визуализируется, но на консоли я получаю:

react_devtools_backend.js:3973 No routes matched location "/"  
    at Routes (http://localhost:3000/static/js/0.chunk.js:39008:24)
    at Router (http://localhost:3000/static/js/0.chunk.js:38933:30)
    at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:38367:23)
    at App

Это мой файл App.js:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import GithubState from "./context/github/GithubState";
import Navbar from "./components/layout/Navbar";
import Home from "./components/pages/Home";
import User from "./components/users/User";
import About from "./components/pages/About";

import "./App.css";

const App = () => {
  return (
    <>
      <Router>
        <Navbar />
        <GithubState>
          <Routes>
            <Route path = "/" element = {<Home />} />
            <Route path = "/user/:username" element = {<User />} />
          </Routes>
        </GithubState>

        <Routes>
          <Route path = "/about" element = {<About />} />
        </Routes>
      </Router>
    </>
  );
};

export default App;

Пожалуйста, помогите мне здесь.

я думаю, вы получаете эту ошибку, потому что у вас есть 2 набора Routes, и каждый из них пытается отобразить /, но этот корень не определен для вашего второго набора. это так работает?: <Router> <Navbar /> <Routes> <GithubState> <Route path = "/" element = {<Home />} /> <Route path = "/user/:username" element = {<User />} /> </GithubState> <Route path = "/about" element = {<About />} /> </Routes> </Router>;

— 17.03.2022 11:35

<Route exact path = "/" element = {<Home />} /> проверьте, помогает ли это

— 17.03.2022 11:37

@kevin добавление точного не помогает ... показывает ту же ошибку

— 17.03.2022 11:59

@coglialoro... это вызовет ошибку, если вы перенесете GithubState внутрь Routes

— 17.03.2022 12:01

reactjs react-router react-router-dom

17.03.2022 11:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

106

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Проблема в том, что вы визуализируете два компонента Routes, а у второго нет пути маршрута, соответствующего текущему пути "/".

Объедините ваши компоненты Routes, чтобы отобразить маршрут с путем "/". Здесь очень поможет создание маршрута макета для рендеринга GithubState провайдера.

import { Outlet } from 'react-router-dom';

const GithubStateLayout = () => (
  <GithubState>
    <Outlet /> // <-- nested routes render out here
  </GithubState>
);

...

const App = () => {
  return (
    <>
      <Router>
        <Navbar />
        <Route element = {<GithubStateLayout />} >
          <Route path = "/" element = {<Home />} />
          <Route path = "/user/:username" element = {<User />} />
        </Route>
        <Route path = "/about" element = {<About />} />
      </Router>
    </>
  );
};

Большое спасибо за помощь. Теперь все предупреждения исчезли.

— 18.03.2022 08:14

@AnubhavKumarYadav Добро пожаловать, рад помочь. Здоровья и удачи!

— 18.03.2022 08:16

17.03.2022 16:51