没有路由匹配位置“/”

Question

我试图点击路由“/”来呈现 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;

请帮帮我。

Answer 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>
    </>
  );
};

没有路由匹配位置“/”

No routes matched location "/"

reactjs

react-router

react-router-dom