BrowserRouter 不是一个<Route>零件。 的所有子组件<Routes>必须是<Route>或者<React.Fragment>

Question

每当我运行我的代码时，我的 Web 应用程序都会出现以下错误：

错误： useHref( ) 只能在<Router>组件的上下文中使用。

错误：[BrowserRouter] 不是<Route>组件。 <Routes>的所有子组件必须是<Route>或<React.Fragment>

我正在使用“react”：“^18.2.0”、“react-dom”：“^18.2.0”、“react-router-dom”：“^6.3.0”。

应用程序.js

import React from "react";
import { BrowserRouter as Route, Routes } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css"

import Navbar from "./components/navbar.component";
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <div className="container">
      <Navbar />
      <Routes>
          <Route path="/" exact component={ExercisesList} />
          <Route path="/edit/:id" component={EditExercise} />
          <Route path="/create" component={CreateExercise} />
          <Route path="/user" component={CreateUser} />  
      </Routes>
    </div>
  );
}

export default App;

Answer 1

react-router-dom中已经有一个内置函数Route 。 所以它告诉你不能将BrowserRouter称为Route 。 你只需要像下面这样，

import React from "react";
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css"
import Navbar from "./components/navbar.component";
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <div className="container">
        <Router>
          <Navbar />
          <Routes>
            <Route path="/" exact component={ExercisesList} />
            <Route path="/edit/:id" component={EditExercise} />
            <Route path="/create"  component={CreateExercise} />
            <Route path="/user"   component={CreateUser} />  
          </Routes>
    <Router>
  </div>
);
}
export default App;

如果您需要对react-router-dom配置有一个非常好的想法。 阅读https://medium.com/@sujith1396/a-basic-implementation-on-react-router-dom-v6-e9ff3b4e0529

Answer 2

您使用BrowserRouter错误。 在BrowserRouter组件内部，您可以放置​​“静态”组件（根据 Sujith Sandeep 的回答）：

<Router>
    <Navbar /> // this is a static component, it is shown always
    ...
</Router>

然后将Routes组件放在同一个BrowserRouter中，其子组件会根据您的浏览器 URL “交换”：

<Routes> // this component renders only one of its children based on URL
    <Route path="/" exact component={ExercisesList} />
    <Route path="/edit/:id" component={EditExercise} />
    <Route path="/create" component={CreateExercise} />
    <Route path="/user" component={CreateUser} />
</Routes>

所以最终你错过的是处理所有组件交换的BrowserRouter组件。

Answer 3

问题

您已将BrowserRouter作为Route导入，并且可能没有包装App /UI 并提供路由上下文的路由器组件。 Route组件 API 也发生了变化， component 、 render和ReactNode children单个element prop，即 JSX。

解决方案

正确导入BrowserRouter并将组件渲染到其中。 将Route组件的element prop 上的路由组件渲染为 JSX。

例子：

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

function App() {
  return (
    <Router>
      <div className="container">
        <Navbar />
        <Routes>
          <Route path="/" element={<ExercisesList />} />
          <Route path="/edit/:id" element={<EditExercise />} />
          <Route path="/create" element={<CreateExercise />} />
          <Route path="/user" element={<CreateUser />} />  
        </Routes>
      </div>
    </Router>
  );
}