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