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

Question

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

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

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

我正在使用"；反应"："18.2.0〃"react dom"："18.2.0〃"react router dom"："6.3.0"；。

App.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-act-router-dom-v6-e9ff3b4e0529

Answer 2

您使用BrowserRouter错误。在CCD_ 13组件内部；静态"；组件(根据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和children功能道具也不复存在，取而代之的是一个element道具，即ReactNode，也称为JSX。

解决方案

正确导入BrowserRouter并将组件渲染到其中。将Route组件的element道具上的路由组件渲染为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>
);
}