反应路由器 v6 不渲染

Question

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

路由器URL.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>
    );
  }
}

应用程序.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组件中。

路由器URL.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>
    );
  }
}

应用程序.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>
  );
}

Answer 2

您必须将 BrowseRouter 导入为路由器，然后导入 Routes、Route。 必须将所有路由包装在路由器中。 然后将每个 Route 包裹在 Routes 中。 此外，路线在 react-router v6 中没有结束标签。 路线是自闭标签。

 import { BrowserRouter as Router, 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 ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/details" element={<Details />} /> <Route path="/contact" element={<Contact />} /> </Routes> </Router> ); } }