我试图点击route"/"来渲染主组件.组件正在渲染,但在控制台上我得到:

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;

请帮帮我.

推荐答案

问题是,您正在渲染两个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>
    </>
  );
};

Reactjs相关问答推荐

props 可以在Reaction中锻造吗?

在Reaction常量函数中未更新状态变量

React Router:在没有手动页面刷新的情况下,路由不会更新内容

我在Route组件上使用元素属性,这样就不需要ID了吗?

在React Router 6中,在路由渲染后更新路由数据

如何在PrimeReact的表格中修改筛选图标功能

无法设置 null 的属性(设置src)

臭名昭著的测试未包含在 act(...) 中

Select 项目后 Select HeadlessUI 组合框中的所有文本?

React v6 中的公共和私有路由

react 测试库不测试包含 react 路由 dom V6 的组件

如何在 React 中使用 debounce hooks

null 不是对象(判断RNSound.IsAndroid)

我应该使用 useEffect 来为 React Native Reanimated 的 prop 值变化设置动画吗?

Reactjs 表单未反映提交时的更改

如何检索包含动态段的未解析路径?

如何解决在 react.js 中找不到模块错误

React Router v6 - 访问嵌套路由和处理手写 url 的正确方法

为什么我在运行一些 npm react 命令时会收到这些警告?

下拉菜单在 AppBar 中未正确对齐