有没有办法解决路由器路径中的错误，RouterV6 React答案

【问题标题】：Is there a way to solve error in Router Path, RouterV6 React有没有办法解决路由器路径中的错误，RouterV6 React
【发布时间】：2021-12-09 04:28:56
【问题描述】：

有没有办法解决这个问题？我有一个错误Error: useRoutes() may be used only in the context of a <Router> component. 我也试过改变路由器的位置，但没能解决问题

这是我的 App.js - 我已经安装了 react-router-dom

import { useContext } from "react";
import About from "./components/about/About";
import Contact from "./components/contact/Contact";
import Intro from "./components/intro/Intro";
import ProductList from "./components/productList/ProductList";
import Devs from "./components/developers/Devs";

import Toggle from "./components/toggle/Toggle";
import { ThemeContext } from "./context";

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

const App = () => {
  const theme = useContext(ThemeContext);
  const darkMode = theme.state.darkMode;
  return (
    <div
      style={{
        backgroundColor: darkMode ? "#222" : "white",
        color: darkMode && "white",
      }}
    >
        <Intro />
        <About />
        <ProductList />
        <Contact />
      <Routes>
        <Route path='/devs' element={<Devs />} />
      </Routes>
    </div>
  );
};

export default App;

Devs.jsx - 这是我要导航的 jsx 文件

import "./devs.css";
const Devs = () => {
  return (
    <div className="d">
        Devs
    </div>
  );
};

export default Devs;

【问题讨论】：

您导入了BrowserRouter，但您在哪里渲染它？ Routes 组件使用 useRoutes 并且错误是说 ReactTree 中它上面没有路由上下文。

标签： reactjs react-router-dom

【解决方案1】：

路由应该包裹在BrowserRouter 中。您还可以创建一个routes.js 文件来处理您所有的routes，以获得更简洁的代码。

<BrowserRouter>
    <Routes>
        <Route path="/" element={<Component1 />} />
        <Route path="/component2" element={<Component2 />} />
        <Route path="/component3" element={<Component3 />} />
    </Routes>
</BrowserRouter>

【讨论】：