反应路由器路线与位置不匹配

Question

不确定为什么这不起作用？一切都已正确导入，所以不确定为什么我在控制台中收到以下错误消息：

No routes matched location "/"

App.jsx

import './App.css';
import React from 'react';
import Home from './pages/Home';
import Explore from './pages/Explore';
import { BrowserRouter as Router, Routes, Route, useRoutes} from "react-router-dom";
// import { useState } from "react";

const App = () => {
  let routes = useRoutes([
      <Routes>
        <Route path="/" exact element={<Home />} />
        <Route path="/explore" exact element={<Explore />}/>
      </Routes>
  ])
  return routes;
}

const AppWrapper = () => {
  return (
    <Router>
      <App />
    </Router>
  );
};

export default AppWrapper;

和主页文件

import React from 'react';
import { useNavigate } from "react-router-dom";

const Home = () => {
    const navigate = useNavigate();
    return (
        
        <div>
            <div>
                <button onClick={() => {navigate("/explore");}}>  
                    Explore page
                </button>
                <h1>Home page</h1>
            </div>
        </div>
    );
}

export default Home;

Answer 1

根据 here 中 useRoutes() 的文档，您使用挂钩的方式不正确。

您可以使用react-router-dom做路由的传统方式，如下：

const App = () => {
  return (
    <Routes>
      <Route path="/" exact element={<Home />} />
      <Route path="/explore" exact element={<Explore />} />
    </Routes>
  )
}

const AppWrapper = () => {
  return (
    <Router>
      <App />
    </Router>
  )
}

如果您真的想使用 useRoutes，我鼓励您查看上面 link 中发送的示例。

Answer 2

useRoutes 挂钩采用路由配置 object。您的代码正在传递 JSX。这是对 useRoutes 挂钩的无效使用。

useRoutes

渲染路由的两种方式：

使用路由配置对象的 useRoutes 钩子。

const routesConfig = [
  {
    path: "/",
    element: <Home />
  },
  {
    path: "/explore",
    element: <Explore />
  },
];

const App = () => {
  const routes = useRoutes(routesConfig);
  return routes;
};

直接渲染 JSX。

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/explore" element={<Explore />}/>
    </Routes>
  );
};

反应路由器路线与位置不匹配

React router routes don't match location

reactjs

react-router-dom