reactjs - React 路由器 v6 不渲染

Question

我尝试使用 React 路由器，但它不起作用。我已经知道 React Router Dom v6 已经从 Switch 更改为 Routes，但是当我运行该程序时它只显示一个空白屏幕。有谁知道如何解决这一问题？这是我的代码:

routerURL.js

import React, { Component } from "react";
import { BrowserRouter as Route, Router } from "react-router-dom";
import Contact from "../component/Contact";
import Details from "../component/Details";
import Home from "../component/Home";

export default class routerURL extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route exact path="/" element={<Home />}></Route>
          <Route path="/details" element={<Details />}></Route>
          <Route path="/contact" element={<Contact />}></Route>
        </div>
      </Router>
    );
  }
}

App.js

import "./../css/App.css";
import Nav from "./Nav";
import Footer from "./Footer";
import RouterURL from "../router/RouterURL";
function App() {
  return (
    <div>
      <Nav />
      <RouterURL />
      <Footer />
    </div>
  );
}

export default App;

Answer 1

您将 BrowswerRouter 导入为 Route。您将需要修复导入，并确保您的导航/页脚在呈现任何链接时被包裹在路由器中。 Route 组件应包装在管理路由匹配的 Routes 组件中。

routerURL.js

import { Routes, Route } from "react-router-dom";
import Contact from "../component/Contact";
import Details from "../component/Details";
import Home from "../component/Home";

export default class routerURL extends Component {
  render() {
    return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/details" element={<Details />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    );
  }
}

App.js

import { BrowserRouter as Router } from "react-router-dom";
import "./../css/App.css";
import Nav from "./Nav";
import Footer from "./Footer";
import RouterURL from "../router/RouterURL";

function App() {
  return (
    <Router>
      <div>
        <Nav />
        <RouterURL />
        <Footer />
      </div>
    </Router>
  );
}