没有路线匹配位置 \"/\"答案

【问题标题】：No routes matched location "/"没有路线匹配位置 \"/\"
【发布时间】：2022-12-19 23:34:23
【问题描述】：

我试图点击路由“/”来渲染 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

这是我的应用程序.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>;
<Route exact path="/" element={<Home />} />检查这是否有帮助
@kevin 添加 exact 没有帮助...显示相同的错误
@coglialoro...如果将 GithubState 带入 Routes 会抛出错误

标签： reactjs react-router react-router-dom

【解决方案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>
    </>
  );
};

【讨论】：

【解决方案2】：

请在 Routes 标签之后添加 Link 标签，并在导入中添加 Link ，这样您就可以解决您面临的问题。希望对你有帮助。

【讨论】：